@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

package/dist/runtime/api/fetcher/fetcher.js

@@ -0,0 +1,222 @@
+import {
+  CwaResourceTypes,
+  getResourceTypeFromIri,
+  resourceTypeToNestedResourceProperties
+} from "../../resources/resource-utils.js";
+import { FinishFetchManifestType } from "../../storage/stores/fetcher/actions.js";
+import { createCwaResourceError } from "../../errors/cwa-resource-error.js";
+import preloadHeaders from "./preload-headers.js";
+export default class Fetcher {
+  cwaFetch;
+  fetchStatusManager;
+  currentRoute;
+  resourcesStoreDefinition;
+  constructor(cwaFetch, fetchStatusManager, currentRoute, resourcesStoreDefinition) {
+    this.cwaFetch = cwaFetch;
+    this.fetchStatusManager = fetchStatusManager;
+    this.currentRoute = currentRoute;
+    this.resourcesStoreDefinition = resourcesStoreDefinition;
+  }
+  async fetchRoute(route) {
+    if (route.meta.cwa?.disabled === true) {
+      this.fetchStatusManager.clearPrimaryFetch();
+      return;
+    }
+    let iri;
+    let manifestPath;
+    const routeParam = route.params.cwaPage0;
+    iri = Array.isArray(routeParam) ? "/" + routeParam.join("/") : routeParam;
+    const resourceType = iri ? getResourceTypeFromIri(iri) : void 0;
+    if (!resourceType || ![CwaResourceTypes.PAGE, CwaResourceTypes.PAGE_DATA].includes(resourceType)) {
+      iri = `/_/routes/${route.path}`;
+      manifestPath = `/_/routes_manifest/${route.path}`;
+    }
+    return await this.fetchResource({
+      path: iri,
+      isPrimary: true,
+      manifestPath
+    });
+  }
+  async fetchResource({ path, token, manifestPath, preload, shallowFetch, noSave, isPrimary, iri: userProvidedIri }) {
+    const iri = userProvidedIri || path.split("?")[0];
+    const startFetchResult = this.fetchStatusManager.startFetch({
+      path,
+      token,
+      isPrimary,
+      manifestPath
+    });
+    if (!startFetchResult.continue) {
+      return this.fetchStatusManager.getFetchedCurrentResource(path);
+    }
+    if (manifestPath) {
+      this.fetchManifest({ token: startFetchResult.token, manifestPath }).then(() => {
+      });
+    }
+    const continueToFetchResource = this.fetchStatusManager.startFetchResource({
+      resource: iri,
+      token: startFetchResult.token
+    });
+    if (!continueToFetchResource) {
+      return this.fetchStatusManager.getFetchedCurrentResource(path);
+    }
+    const finishFetchResourceEvent = {
+      resource: iri,
+      token: startFetchResult.token
+    };
+    let cwaFetchRaw;
+    let resource;
+    try {
+      cwaFetchRaw = this.fetch({
+        path,
+        preload
+      });
+      const fetchResponse = await cwaFetchRaw.response;
+      resource = this.fetchStatusManager.finishFetchResource({
+        ...finishFetchResourceEvent,
+        success: true,
+        fetchResponse,
+        headers: cwaFetchRaw.headers,
+        noSave
+      });
+    } catch (error) {
+      this.fetchStatusManager.finishFetchResource({
+        ...finishFetchResourceEvent,
+        success: false,
+        error: createCwaResourceError(error)
+      });
+    }
+    const doRedirect = this.fetchStatusManager.primaryFetchPath === path && getResourceTypeFromIri(iri) === CwaResourceTypes.ROUTE && resource?.redirectPath;
+    if (doRedirect) {
+      this.fetchStatusManager.abortFetch(startFetchResult.token);
+    } else if (resource && shallowFetch !== true) {
+      await this.fetchNestedResources({ resource, token: startFetchResult.token, noSave: !!noSave, onlyIfNoExist: shallowFetch === "noexist" });
+    }
+    if (!token) {
+      await this.fetchStatusManager.finishFetch({
+        token: startFetchResult.token
+      });
+    }
+    return resource;
+  }
+  async fetchManifest(event) {
+    let resources = [];
+    try {
+      const result = this.fetch({
+        path: event.manifestPath
+      });
+      const response = await result.response;
+      resources = response._data?.resource_iris || [];
+      if (resources.length && this.fetchStatusManager.isCurrentFetchingToken(event.token)) {
+        await this.fetchBatch({ paths: resources, token: event.token });
+      }
+      this.fetchStatusManager.finishManifestFetch({
+        type: FinishFetchManifestType.SUCCESS,
+        token: event.token,
+        resources
+      });
+    } catch (error) {
+      this.fetchStatusManager.finishManifestFetch({
+        type: FinishFetchManifestType.ERROR,
+        token: event.token,
+        error: createCwaResourceError(error)
+      });
+    }
+  }
+  fetchNestedResources({ resource, token, noSave, onlyIfNoExist }) {
+    const iri = resource["@id"];
+    const type = getResourceTypeFromIri(iri);
+    if (!type) {
+      return;
+    }
+    const nestedIris = [];
+    const nestedPropertiesToFetch = resourceTypeToNestedResourceProperties[type];
+    for (const prop of nestedPropertiesToFetch) {
+      let propIris = resource[prop];
+      if (!propIris) {
+        continue;
+      }
+      if (Array.isArray(propIris)) {
+        nestedIris.push(...propIris);
+      } else {
+        if (prop === "publishedResource") {
+          propIris += "?published=true";
+        }
+        nestedIris.push(propIris);
+      }
+    }
+    if (onlyIfNoExist) {
+      nestedIris.filter((iri2) => !this.resourcesStore.current.currentIds.includes(iri2));
+      if (!nestedIris.length) {
+        return;
+      }
+    }
+    return this.fetchBatch({ paths: nestedIris, token, noSave });
+  }
+  fetchBatch({ paths, token, noSave, shallowFetch }) {
+    const promises = [];
+    for (const path of paths) {
+      const pathPromise = new Promise((resolve) => {
+        this.fetchResource({ path, token, noSave, shallowFetch }).then((resource) => {
+          resolve(resource);
+        }).catch(() => {
+          resolve(void 0);
+        });
+      });
+      promises.push(pathPromise);
+    }
+    return Promise.all(promises);
+  }
+  fetch(event) {
+    const url = event.noQuery ? event.path : this.appendQueryToPath(event.path);
+    const headers = this.createRequestHeaders(event);
+    const response = this.cwaFetch.fetch.raw(url, {
+      headers
+    });
+    return {
+      response,
+      headers
+    };
+  }
+  appendQueryToPath(path) {
+    const queryObj = this.currentRoute.query;
+    if (!queryObj) {
+      return path;
+    }
+    const queryKeys = Object.keys(queryObj);
+    if (!queryKeys.length) {
+      return path;
+    }
+    const queryString = queryKeys.reduce((accumulator, key) => {
+      if (key.endsWith("[]") && Array.isArray(queryObj[key])) {
+        for (const arrValue of queryObj[key]) {
+          accumulator.push(key + "=" + arrValue);
+        }
+      } else {
+        accumulator.push(key + "=" + queryObj[key]);
+      }
+      return accumulator;
+    }, []).join("&");
+    const delimiter = path.includes("?") ? "&" : "?";
+    return `${path}${delimiter}${queryString}`;
+  }
+  createRequestHeaders(event) {
+    let preload = event.preload;
+    if (!preload) {
+      const resourceType = getResourceTypeFromIri(event.path);
+      if (resourceType) {
+        preload = preloadHeaders[resourceType];
+      }
+    }
+    const requestHeaders = {};
+    if (this.fetchStatusManager.primaryFetchPath) {
+      requestHeaders.path = this.fetchStatusManager.primaryFetchPath.replace(/^\/_\/routes\//, "");
+    }
+    if (preload) {
+      requestHeaders.preload = preload.join(",");
+    }
+    return requestHeaders;
+  }
+  get resourcesStore() {
+    return this.resourcesStoreDefinition.useStore();
+  }
+}

package/dist/runtime/api/fetcher/preload-headers.d.ts

@@ -0,0 +1,6 @@
+import { CwaResourceTypes } from '../../resources/resource-utils.js';
+type PreloadMap = {
+    [T in CwaResourceTypes]: Array<string>;
+};
+declare const preloadHeaders: PreloadMap;
+export default preloadHeaders;

package/dist/runtime/api/fetcher/preload-headers.js

@@ -0,0 +1,31 @@
+import { CwaResourceTypes } from "../../resources/resource-utils.js";
+const preloadToNextComponent = "/componentGroups/*/componentPositions/*/component";
+const preloadHeaders = {
+  [CwaResourceTypes.ROUTE]: [
+    `/page/layout${preloadToNextComponent}${preloadToNextComponent}`,
+    `/page${preloadToNextComponent}${preloadToNextComponent}`,
+    `/pageData/page/layout${preloadToNextComponent}${preloadToNextComponent}`,
+    `/pageData/page${preloadToNextComponent}${preloadToNextComponent}`
+  ],
+  [CwaResourceTypes.PAGE]: [
+    `/layout${preloadToNextComponent}${preloadToNextComponent}`,
+    `${preloadToNextComponent}${preloadToNextComponent}`
+  ],
+  [CwaResourceTypes.LAYOUT]: [
+    `${preloadToNextComponent}${preloadToNextComponent}`
+  ],
+  [CwaResourceTypes.PAGE_DATA]: [
+    `/page/layout${preloadToNextComponent}${preloadToNextComponent}`,
+    `/page${preloadToNextComponent}${preloadToNextComponent}`
+  ],
+  [CwaResourceTypes.COMPONENT_GROUP]: [
+    `/componentPositions/*/component${preloadToNextComponent}${preloadToNextComponent}`
+  ],
+  [CwaResourceTypes.COMPONENT_POSITION]: [
+    `/component${preloadToNextComponent}${preloadToNextComponent}`
+  ],
+  [CwaResourceTypes.COMPONENT]: [
+    preloadToNextComponent
+  ]
+};
+export default preloadHeaders;

package/dist/runtime/api/forms.d.ts

@@ -0,0 +1,40 @@
+import type { ComputedRef } from 'vue';
+import type { ResourcesStore } from '../storage/stores/resources/resources-store.js';
+interface ViewVars {
+    full_name: string;
+    name: string;
+    id: string;
+    unique_block_prefix: string;
+    valid: boolean;
+    submitted: boolean;
+    required: boolean;
+    value: any;
+    errors: string[];
+    action?: string;
+    block_prefixes: string[];
+    disabled: boolean;
+    checked?: boolean;
+    multiple?: boolean;
+    attr: {
+        [key: string]: any;
+    };
+    label?: string;
+    label_attr: {
+        [key: string]: any;
+    };
+    [key: string]: any;
+}
+interface FormView {
+    vars: ViewVars;
+}
+interface KeyedFormView {
+    [key: string]: FormView;
+}
+export default class Forms {
+    private resourcesStoreDefinition;
+    constructor(resourcesStoreDefinition: ResourcesStore);
+    getForm(iri: string): ComputedRef<KeyedFormView | undefined>;
+    getFormViewErrors(formIri: string, field: string): ComputedRef<string[] | undefined>;
+    private get resourcesStore();
+}
+export {};

package/dist/runtime/api/forms.js

@@ -0,0 +1,40 @@
+import { computed } from "vue";
+export default class Forms {
+  resourcesStoreDefinition;
+  constructor(resourcesStoreDefinition) {
+    this.resourcesStoreDefinition = resourcesStoreDefinition;
+  }
+  getForm(iri) {
+    return computed(() => {
+      const resource = this.resourcesStore.current.byId[iri];
+      if (resource?.data?.["@type"] !== "Form") {
+        return;
+      }
+      const createFormViewObject = (apiFormView) => {
+        const structuredFormView = {
+          vars: Object.assign({}, apiFormView.vars)
+        };
+        let data = {
+          [apiFormView.vars.full_name]: structuredFormView
+        };
+        if (apiFormView.children) {
+          for (const child of apiFormView.children) {
+            data = { ...data, ...createFormViewObject(child) };
+          }
+        }
+        return data;
+      };
+      return createFormViewObject(resource.data.formView);
+    });
+  }
+  getFormViewErrors(formIri, field) {
+    return computed(() => {
+      const form = this.getForm(formIri);
+      const errors = form.value?.[field].vars.errors;
+      return errors && errors.length ? errors : void 0;
+    });
+  }
+  get resourcesStore() {
+    return this.resourcesStoreDefinition.useStore();
+  }
+}

package/dist/runtime/api/mercure.d.ts

@@ -0,0 +1,33 @@
+import type { ComputedRef } from 'vue';
+import type { MercureStore } from '../storage/stores/mercure/mercure-store.js';
+import type { ResourcesStore } from '../storage/stores/resources/resources-store.js';
+import type { FetcherStore } from '../storage/stores/fetcher/fetcher-store.js';
+import type Fetcher from './fetcher/fetcher.js';
+export default class Mercure {
+    private mercureStoreDefinition;
+    private resourcesStoreDefinition;
+    private fetcherStoreDefinition;
+    private eventSource?;
+    private lastEventId?;
+    private mercureMessageQueue;
+    private fetcher?;
+    private requestCount?;
+    private resourcesManager?;
+    constructor(mercureStoreDefinition: MercureStore, resourcesStoreDefinition: ResourcesStore, fetcherStoreDefinition: FetcherStore);
+    setFetcher(fetcher: Fetcher): void;
+    setRequestCount(requestCount: ComputedRef<number>): void;
+    setMercureHubFromLinkHeader(linkHeader: string): void;
+    init(forceRestart?: boolean): void;
+    closeMercure(): void;
+    private get requestsInProgress();
+    private handleMercureMessage;
+    private isMessageForCurrentResource;
+    private addMercureMessageToQueue;
+    private processMessageQueue;
+    private collectResourceActions;
+    private fetch;
+    private get hubUrl();
+    private get hub();
+    private get mercureStore();
+    private get resourcesStore();
+}

package/dist/runtime/api/mercure.js

@@ -0,0 +1,191 @@
+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/runtime/composables/process";
+export default class Mercure {
+  constructor(mercureStoreDefinition, resourcesStoreDefinition, fetcherStoreDefinition) {
+    this.mercureStoreDefinition = mercureStoreDefinition;
+    this.resourcesStoreDefinition = resourcesStoreDefinition;
+    this.fetcherStoreDefinition = fetcherStoreDefinition;
+  }
+  eventSource;
+  lastEventId;
+  mercureMessageQueue = [];
+  fetcher;
+  requestCount;
+  resourcesManager;
+  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 (!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.fetcherStoreDefinition.useStore().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.mercureStoreDefinition.useStore();
+  }
+  get resourcesStore() {
+    return this.resourcesStoreDefinition.useStore();
+  }
+}

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,82 @@
+import { createApp, onBeforeUnmount, onMounted, resolveComponent, watch } from "vue";
+import { hasProtocol } from "ufo";
+import { defineNuxtLink } from "#app";
+import { useCwa } from "#cwa/runtime/composables/cwa";
+export const useHtmlContent = (container) => {
+  let watchStopHandle;
+  const $cwa = useCwa();
+  const isExternal = (props) => {
+    if (props.external) {
+      return true;
+    }
+    if (props.target && props.target !== "_self") {
+      return true;
+    }
+    return props.to === "" || hasProtocol(props.to, { acceptRelative: true });
+  };
+  const linkClickHandler = (e, props) => {
+    $cwa.navigationDisabled && isExternal(props) && e.preventDefault();
+  };
+  function convertAnchor(anchor) {
+    const href = anchor.getAttribute("href");
+    if (!href) {
+      return;
+    }
+    function hrefToUrl(href2) {
+      try {
+        new URL(href2);
+        return href2;
+      } catch (err) {
+        return `//${href2}`;
+      }
+    }
+    const props = {
+      to: hrefToUrl(href),
+      innerHTML: anchor.innerHTML
+    };
+    for (const attr of anchor.attributes) {
+      if (!["href"].includes(attr.name)) {
+        const anchorAttr = anchor.getAttribute(attr.name);
+        if (anchorAttr) {
+          props[attr.name] = anchorAttr;
+        }
+      }
+    }
+    const rlComponent = resolveComponent("RouterLink");
+    if (typeof rlComponent === "string") {
+      return;
+    }
+    const nlComponent = defineNuxtLink({});
+    const app = createApp(nlComponent, {
+      ...props,
+      onClick: (e) => linkClickHandler(e, props)
+    });
+    app.component("RouterLink", rlComponent);
+    return app;
+  }
+  function replaceAnchors() {
+    if (!container.value) {
+      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[]>;
+};