@startinblox/core 0.18.0-beta.3 → 0.18.0-beta.4

package/dist/libs/store/store.js

@@ -1,10 +1,11 @@
-let _Symbol$toPrimitive;
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import JSONLDContextParser from '../../_snowpack/pkg/jsonld-context-parser.js';
 //@ts-ignore
 import PubSub from 'https://cdn.skypack.dev/pubsub-js';
+import jsonld from '../../_snowpack/pkg/jsonld.js';
+import { CustomGetter } from './custom-getter.js';
 import { appendServerSearchToIri } from './server-search.js';
 import { appendServerPaginationToIri } from './server-pagination.js';
 const ContextParser = JSONLDContextParser.ContextParser;
@@ -67,18 +68,13 @@ class Store {
    * @param forceFetch - force the fetch of data
    * @param serverPagination - Server pagination options
    * @param serverSearch - Server search options
-   *
+   * @param predicateName - predicate name if we target a specific predicate from the resource, useful for arrays
+   * 
    * @returns The fetched resource
    *
    * @async
    */
-  async getData(id) {
-    let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
-    let localData = arguments.length > 3 ? arguments[3] : undefined;
-    let forceFetch = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-    let serverPagination = arguments.length > 5 ? arguments[5] : undefined;
-    let serverSearch = arguments.length > 6 ? arguments[6] : undefined;
+  async getData(id, context = {}, parentId = "", localData, forceFetch = false, serverPagination, serverSearch) {
     let key = id;
     if (serverPagination) {
       key = id + "#p" + serverPagination.limit + "?o" + serverPagination.offset;
@@ -114,9 +110,9 @@ class Store {
         return;
       }
       const serverContext = await myParser.parse([resource['@context'] || {}]);
-      const resourceProxy = new CustomGetter(key, resource, clientContext, serverContext, parentId ? parentId : key, serverPagination, serverSearch).getProxy();
+      // const resourceProxy = new CustomGetter(key, resource, clientContext, serverContext, parentId ? parentId : key, serverPagination, serverSearch).getProxy();
       // Cache proxy
-      await this.cacheGraph(key, resourceProxy, clientContext, serverContext, parentId ? parentId : key, serverPagination, serverSearch);
+      await this.cacheGraph(resource, clientContext, serverContext, parentId ? parentId : key, serverPagination, serverSearch);
       this.loadingList.delete(key);
       document.dispatchEvent(new CustomEvent('resourceReady', {
         detail: {
@@ -144,11 +140,17 @@ class Store {
       });
     }
   }
-  async fetchData(id) {
-    let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
-    let serverPagination = arguments.length > 3 ? arguments[3] : undefined;
-    let serverSearch = arguments.length > 4 ? arguments[4] : undefined;
+
+  /**
+   * Fetch resource
+   * @param id - id of the resource
+   * @param context - context used to expand id
+   * @param idParent - id of the caller resource. Needed to expand id
+   * @param serverPagination - Server pagination query params
+   * @param serverSearch - Server search query params
+   * @returns data in json
+   */
+  async fetchData(id, context = {}, parentId = "", serverPagination, serverSearch) {
     let iri = this._getAbsoluteIri(id, context, parentId);
     if (serverPagination) iri = appendServerPaginationToIri(iri, serverPagination);
     if (serverSearch) iri = appendServerSearchToIri(iri, serverSearch);
@@ -158,6 +160,12 @@ class Store {
       // 'Prefer' : 'return=representation; max-triple-count="100"' // Commenting out for now as it raises CORS errors
     };
 
+    /**
+     * Fetch data with authentication if available (sib-auth)
+     * @param iri - iri to call
+     * @param options - options of the request
+     * @returns - response
+     */
     return this.fetchAuthn(iri, {
       method: 'GET',
       headers: headers,
@@ -167,59 +175,51 @@ class Store {
       return response.json();
     });
   }
-  async cacheGraph(key, resource, clientContext, parentContext, parentId, serverPagination, serverSearch) {
-    if (resource.properties) {
-      // if proxy, cache it
-      if (this.get(key) && this.cache.get(key).merge) {
+
+  /**
+  * Cache the whole graph
+  * @param resource - graph fetched
+  * @param clientContext - context of the client app
+  * @param parentContext - context of the server
+  * @param parentId - id of the parent caller
+  * @param serverPagination - Server pagination query params
+  * @param serverSearch - Server search query params
+  */
+  async cacheGraph(resource, clientContext, parentContext, parentId, serverPagination, serverSearch) {
+    const flattenedResources = await jsonld.flatten(resource);
+    const compactedResources = await Promise.all(flattenedResources.map(r => jsonld.compact(r, {})));
+    for (let resource of compactedResources) {
+      let id = resource['@id'] || resource['id'];
+      let key = resource['@id'] || resource['id'];
+      if (!key) console.log('No key or id for resource:', resource);
+      if (key === '/') key = parentId;
+      if (key.startsWith('_:b')) key = key + parentId; // anonymous node -> change key before saving in cache
+
+      // We have to add the server search and pagination attributes again here to the resource cache key
+      if (key === id && resource['@type'] == this.getExpandedPredicate("ldp:Container", clientContext)) {
+        // Add only pagination and search params to the original resource
+        if (serverPagination) key = key + "#p" + serverPagination.limit + "?o" + serverPagination.offset;
+        if (serverSearch) key = appendServerSearchToIri(key, serverSearch);
+      }
+      const resourceProxy = new CustomGetter(key, resource, clientContext, parentContext, parentId, serverPagination, serverSearch).getProxy();
+      if (resourceProxy.isContainer()) this.subscribeChildren(resourceProxy, id);
+      if (this.get(key)) {
         // if already cached, merge data
-        this.cache.get(key).merge(resource);
-        ;
+        this.cache.get(key).merge(resourceProxy);
       } else {
         // else, put in cache
-        this.cache.set(key, resource);
+        this.cacheResource(key, resourceProxy);
       }
     }
+  }
 
-    // Cache nested resources
-    if (resource.getSubObjects) {
-      for (let res of resource.getSubObjects()) {
-        let newParentContext = parentContext;
-        // If additional context in resource, use it to expand properties
-        if (res['@context']) newParentContext = await myParser.parse({
-          ...parentContext,
-          ...res['@context']
-        });
-        const resourceProxy = new CustomGetter(res['@id'], res, clientContext, newParentContext, parentId).getProxy();
-        // this.subscribeResourceTo(resource['@id'], res['@id']); // removed to prevent useless updates
-        await this.cacheGraph(res['@id'], resourceProxy, clientContext, parentContext, parentId, serverPagination, serverSearch);
-      }
-    }
-
-    // Cache children of container
-    if (resource['@type'] == "ldp:Container" && resource.getChildren) {
-      const cacheChildrenPromises = [];
-
-      //TODO: return complete object without the need for the fetch data from the cacheGraph
-      for (let res of await resource.getChildren()) {
-        this.subscribeResourceTo(resource['@id'], res['@id']);
-        cacheChildrenPromises.push(this.cacheGraph(res['@id'], res, clientContext, parentContext, parentId, serverPagination, serverSearch));
-      }
-      await Promise.all(cacheChildrenPromises);
-      return;
-    }
-
-    // Create proxy, (fetch data) and cache resource
-    if (resource['@id'] && !resource.properties) {
-      if (resource['@id'].match(/^b\d+$/)) return; // not anonymous node
-      // Fetch data if
-      if (resource['@type'] === "sib:federatedContainer" && resource['@cache'] !== 'false') {
-        // if object is federated container
-        await this.getData(resource['@id'], clientContext, parentId); // then init graph
-        return;
-      }
-      const resourceProxy = new CustomGetter(key, resource, clientContext, parentContext, parentId).getProxy();
-      await this.cacheGraph(key, resourceProxy, clientContext, parentContext, parentId);
-    }
+  /**
+   * Put proxy in cache
+   * @param key
+   * @param resourceProxy
+   */
+  cacheResource(key, resourceProxy) {
+    this.cache.set(key, resourceProxy);
   }
 
   /**
@@ -247,6 +247,25 @@ class Store {
       ok: true
     };
   }
+
+  /**
+   * Subscribe all the children of a container to its parent
+   * @param container
+   */
+  subscribeChildren(container, containerId) {
+    if (!container['ldp:contains']) return;
+    for (let res of container['ldp:contains']) {
+      this.subscribeResourceTo(containerId, res['@id'] || res['id']);
+    }
+  }
+
+  /**
+   * Update a resource
+   * @param method - can be POST, PUT or PATCH
+   * @param resource - content of the updated resource
+   * @param id - id of the resource to update
+   * @returns void
+   */
   async _updateResource(method, resource, id) {
     if (!['POST', 'PUT', 'PATCH', '_LOCAL'].includes(method)) throw new Error('Error: method not allowed');
     const context = await myParser.parse([resource['@context'] || {}]); // parse context before expandTerm
@@ -287,13 +306,10 @@ class Store {
     for (const resource of resourceWithContexts) {
       if (!this._isLocalId(resource.id)) this.clearCache(resource.id);
     }
-    await Promise.all(resourceWithContexts.map(_ref => {
-      let {
-        id,
-        context
-      } = _ref;
-      return this.getData(id, context || base_context);
-    }));
+    await Promise.all(resourceWithContexts.map(({
+      id,
+      context
+    }) => this.getData(id, context || base_context)));
     return resourceIds;
   }
   /**
@@ -437,8 +453,7 @@ class Store {
    *
    * @returns id of the deleted resource
    */
-  async delete(id) {
-    let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  async delete(id, context = {}) {
     const expandedId = this._getExpandedId(id, context);
     const deleted = await this.fetchAuthn(expandedId, {
       method: 'DELETE',
@@ -468,6 +483,9 @@ class Store {
   _getExpandedId(id, context) {
     return context && Object.keys(context) ? ContextParser.expandTerm(id, context) : id;
   }
+  getExpandedPredicate(property, context) {
+    return ContextParser.expandTerm(property, context, true);
+  }
   _isLocalId(id) {
     return id.startsWith('store://local.');
   }
@@ -500,7 +518,7 @@ class Store {
    */
   _getAbsoluteIri(id, context, parentId) {
     let iri = ContextParser.expandTerm(id, context); // expand if reduced ids
-    if (parentId) {
+    if (parentId && !parentId.startsWith('store://local')) {
       // and get full URL from parent caller for local files
       let parentIri = new URL(parentId, document.location.href).href;
       iri = new URL(iri, parentIri).href;
@@ -510,14 +528,6 @@ class Store {
     return iri;
   }
 
-  /**
-   * Check if object is a full resource
-   * @param resource
-   */
-  _resourceIsComplete(resource) {
-    return !!(Object.keys(resource).filter(p => !p.startsWith('@')).length > 0 && resource['@id']);
-  }
-
   /**
    * Return language of the users
    */
@@ -547,265 +557,4 @@ if (window.sibStore) {
   store = new Store(storeOptions);
   window.sibStore = store;
 }
-export { store };
-_Symbol$toPrimitive = Symbol.toPrimitive;
-class CustomGetter {
-  // search attributes to give to server
-
-  constructor(resourceId, resource, clientContext, serverContext) {
-    let parentId = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
-    let serverPagination = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
-    let serverSearch = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {};
-    _defineProperty(this, "resource", void 0);
-    // content of the requested resource
-    _defineProperty(this, "resourceId", void 0);
-    _defineProperty(this, "clientContext", void 0);
-    // context given by the app
-    _defineProperty(this, "serverContext", void 0);
-    // context given by the server
-    _defineProperty(this, "parentId", void 0);
-    // id of the parent resource, used to get the absolute url of the current resource
-    _defineProperty(this, "serverPagination", void 0);
-    // pagination attributes to give to server
-    _defineProperty(this, "serverSearch", void 0);
-    this.clientContext = clientContext;
-    this.serverContext = serverContext;
-    this.parentId = parentId;
-    this.resource = this.expandProperties({
-      ...resource
-    }, serverContext);
-    this.resourceId = resourceId;
-    this.serverPagination = serverPagination;
-    this.serverSearch = serverSearch;
-  }
-
-  /**
-   * Expand all predicates of a resource with a given context
-   * @param resource: object
-   * @param context: object
-   */
-  expandProperties(resource, context) {
-    for (let prop of Object.keys(resource)) {
-      if (!prop) continue;
-      this.objectReplaceProperty(resource, prop, ContextParser.expandTerm(prop, context, true));
-    }
-    return resource;
-  }
-
-  /**
-   * Change the key of an object
-   * @param object: object
-   * @param oldProp: string - current key
-   * @param newProp: string - new key to set
-   */
-  objectReplaceProperty(object, oldProp, newProp) {
-    if (newProp !== oldProp) {
-      Object.defineProperty(object, newProp, Object.getOwnPropertyDescriptor(object, oldProp) || '');
-      delete object[oldProp];
-    }
-  }
-
-  /**
-   * Get the property of a resource for a given path
-   * @param path: string
-   */
-  async get(path) {
-    if (!path) return;
-    const path1 = path.split('.');
-    const path2 = [];
-    let value;
-    if (!this.isFullResource()) {
-      // if resource is not complete, fetch it first
-      await this.getResource(this.resourceId, {
-        ...this.clientContext,
-        ...this.serverContext
-      }, this.parentId);
-    }
-    while (true) {
-      try {
-        value = this.resource[this.getExpandedPredicate(path1[0])];
-      } catch (e) {
-        break;
-      }
-      if (path1.length <= 1) break; // no dot path
-      const lastPath1El = path1.pop();
-      if (lastPath1El) path2.unshift(lastPath1El);
-    }
-    if (path2.length === 0) {
-      // end of the path
-      if (!value || !value['@id']) return value; // no value or not a resource
-      return await this.getResource(value['@id'], {
-        ...this.clientContext,
-        ...this.serverContext
-      }, this.parentId || this.resourceId); // return complete resource
-    }
-
-    if (!value) return undefined;
-    let resource = await this.getResource(value['@id'], {
-      ...this.clientContext,
-      ...this.serverContext
-    }, this.parentId || this.resourceId);
-    store.subscribeResourceTo(this.resourceId, value['@id']);
-    return resource ? await resource[path2.join('.')] : undefined; // return value
-  }
-
-  /**
-   * Cache resource in the store, and return the created proxy
-   * @param id
-   * @param context
-   * @param iriParent
-   * @param forceFetch
-   */
-  async getResource(id, context, iriParent) {
-    let forceFetch = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-    return store.getData(id, context, iriParent, undefined, forceFetch);
-  }
-
-  /**
-   * Return true if the resource is a container
-   */
-  isContainer() {
-    return this.resource["@type"] == "ldp:Container" || this.resource["@type"] == "sib:federatedContainer";
-  }
-
-  /**
-   * Get all properties of a resource
-   */
-  getProperties() {
-    return Object.keys(this.resource).map(prop => this.getCompactedPredicate(prop));
-  }
-
-  /**
-   * Get children of container as objects
-   */
-  getChildren() {
-    return this.resource[this.getExpandedPredicate("ldp:contains")] || [];
-  }
-
-  /**
-   * Get children of container as Proxys
-   */
-  getLdpContains() {
-    const children = this.resource[this.getExpandedPredicate("ldp:contains")];
-    return children ? children.map(res => store.get(res['@id'])) : [];
-  }
-
-  /**
-   * Get all nested resource or containers which contains datas
-   */
-  getSubObjects() {
-    let subObjects = [];
-    for (let p of Object.keys(this.resource)) {
-      let property = this.resource[p];
-      if (!this.isFullNestedResource(property)) continue; // if not a resource, stop
-      if (property['@type'] == "ldp:Container" && (property['ldp:contains'] == undefined || property['ldp:contains'].length >= 1 && !this.isFullNestedResource(property['ldp:contains'][0]))) continue; // if not a full container
-      subObjects.push(property);
-    }
-    return subObjects;
-  }
-  merge(resource) {
-    this.resource = {
-      ...this.getResourceData(),
-      ...resource.getResourceData()
-    };
-  }
-  getResourceData() {
-    return this.resource;
-  }
-
-  /**
-   * return true if prop is a resource with an @id and some properties
-   * @param prop
-   */
-  isFullNestedResource(prop) {
-    return prop && typeof prop == "object" && prop['@id'] != undefined && Object.keys(prop).filter(p => !p.startsWith('@')).length > 0;
-  }
-  /**
-   * return true resource seems complete
-   * @param prop
-   */
-  isFullResource() {
-    return Object.keys(this.resource).filter(p => !p.startsWith('@')).length > 0;
-  }
-  async getPermissions() {
-    const permissionPredicate = this.getExpandedPredicate("permissions");
-    let permissions = this.resource[permissionPredicate];
-    if (!permissions) {
-      // if no permission, re-fetch data
-      await this.getResource(this.resourceId, {
-        ...this.clientContext,
-        ...this.serverContext
-      }, this.parentId, true);
-      permissions = this.resource[permissionPredicate];
-    }
-    return permissions ? permissions.map(perm => ContextParser.expandTerm(perm.mode['@type'], this.serverContext, true)) : [];
-  }
-
-  /**
-   * Remove the resource from the cache
-   */
-  clearCache() {
-    store.clearCache(this.resourceId);
-  }
-  getExpandedPredicate(property) {
-    return ContextParser.expandTerm(property, {
-      ...this.clientContext,
-      ...this.serverContext
-    }, true);
-  }
-  getCompactedPredicate(property) {
-    return ContextParser.compactIri(property, {
-      ...this.clientContext,
-      ...this.serverContext
-    }, true);
-  }
-  getCompactedIri(id) {
-    return ContextParser.compactIri(id, {
-      ...this.clientContext,
-      ...this.serverContext
-    });
-  }
-  toString() {
-    return this.getCompactedIri(this.resource['@id']);
-  }
-  [_Symbol$toPrimitive]() {
-    return this.getCompactedIri(this.resource['@id']);
-  }
-
-  /**
-   * Returns a Proxy which handles the different get requests
-   */
-  getProxy() {
-    return new Proxy(this, {
-      get: (resource, property) => {
-        if (!this.resource) return undefined;
-        if (typeof resource[property] === 'function') return resource[property].bind(resource);
-        switch (property) {
-          case '@id':
-            if (this.resource['@id']) return this.getCompactedIri(this.resource['@id']); // Compact @id if possible
-            else console.log(this.resource, this.resource['@id']);
-            return;
-          case '@type':
-            return this.resource['@type'];
-          // return synchronously
-          case 'properties':
-            return this.getProperties();
-          case 'ldp:contains':
-            return this.getLdpContains();
-          // returns standard arrays synchronously
-          case 'permissions':
-            return this.getPermissions();
-          // get expanded permissions
-          case 'clientContext':
-            return this.clientContext;
-          // get saved client context to re-fetch easily a resource
-          case 'then':
-            return;
-          default:
-            // FIXME: missing 'await'
-            return resource.get(property);
-        }
-      }
-    });
-  }
-}
+export { store };

package/dist/mixins/attributeBinderMixin.js

@@ -20,8 +20,7 @@ const AttributeBinderMixin = {
    * Replace store://XXX attributes by corresponding data
    * @param reset - set to false if no need to reset data
    */
-  async replaceAttributesData() {
-    let reset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  async replaceAttributesData(reset = true) {
     if (reset) this.resetAttributesData();
     const oldAttributes = Array.from(this.element.attributes) // transform NamedNodeMap in object
     .reduce((obj, attr) => {
@@ -59,7 +58,7 @@ const AttributeBinderMixin = {
       const value = attributes[attr];
       // Avoid error if value is a number
       if (typeof value === 'string') {
-        // Replace attribute value
+        // Replace attribute value                                              
         if (!isContainer && resource && value.startsWith('store://resource')) {
           // RESOURCE
           let path = value.replace('store://resource.', '');
@@ -98,9 +97,7 @@ const AttributeBinderMixin = {
    * @param maxRetries
    * @returns
    */
-  async retry(fn) {
-    let ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
-    let maxRetries = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 5;
+  async retry(fn, ms = 200, maxRetries = 5) {
     return new Promise((resolve, reject) => {
       let retries = 0;
       fn().then(resolve).catch(() => {

package/dist/mixins/federationMixin.js

@@ -17,6 +17,7 @@ const FederationMixin = {
     if (nextProcessor) await nextProcessor(newResources, listPostProcessors, div, context);
   },
   async getResources(resources) {
+    if (!resources) return [];
     const newResources = [];
     const getChildResources = async res => {
       if (!res) return;
@@ -29,11 +30,16 @@ const FederationMixin = {
           const resourcesFetched = await this.fetchSource(containerId); // fetch the resources of this container
           if (resourcesFetched) newResources.push(...(await this.getResources(resourcesFetched))); // Add content of source to array...
         }
+      } else if (!res.isArray?.()) {
+        const resource = await store.getData(res['@id'], this.context);
+        if (resource) newResources.push(resource);
       } else {
         newResources.push(res); // Or resource directly if not a container
       }
     };
 
+    // Special case for list support, if there is only one item it is serialized as an object, not an array
+    if (!Array.isArray(resources)) resources = [resources];
     await Promise.all(resources.map(res => getChildResources(res)));
     return newResources;
   },

package/dist/mixins/filterMixin.js

@@ -67,12 +67,9 @@ const FilterMixin = {
     const filters = this.filters;
     if (this.isFilteredOnServer() && filters) {
       const fields = Object.keys(filters);
-      const value = Object.values(filters).map(_ref => {
-        let {
-          value
-        } = _ref;
-        return value;
-      }).filter(value => !!value).join(' ').trim();
+      const value = Object.values(filters).map(({
+        value
+      }) => value).filter(value => !!value).join(' ').trim();
       if (fields.length > 0 && value) {
         return {
           fields,
@@ -109,14 +106,15 @@ const FilterMixin = {
         console.warn(`The format value of ${field} is not suitable with auto-range-[field] attribute`);
         continue;
       }
-      const nextArrayOfIds = nextArrayOfObjects['ldp:contains'];
-      for (const obj of nextArrayOfIds) {
-        // catch each element id
-        arrayOfDataIds.push(obj['@id']);
-      }
       if (nextArrayOfObjects['@type'] !== 'ldp:Container') {
         // if no element in 'ldp:contains', catch object id
         arrayOfDataIds.push(nextArrayOfObjects['@id']);
+      } else {
+        if (!nextArrayOfObjects['ldp:contains']) continue;
+        for (const obj of nextArrayOfObjects['ldp:contains']) {
+          // catch each element id
+          arrayOfDataIds.push(obj['@id']);
+        }
       }
     }
     return arrayOfDataIds;
@@ -141,11 +139,10 @@ const FilterMixin = {
       name: attr['name'].replace('search-', ''),
       value: attr['value']
     }));
-    searchAttributes.forEach(_ref2 => {
-      let {
-        name,
-        value
-      } = _ref2;
+    searchAttributes.forEach(({
+      name,
+      value
+    }) => {
       this.searchForm.setAttribute(name, value);
     });
     this.element.insertBefore(this.searchForm, this.element.firstChild);

package/dist/mixins/listMixin.js

@@ -43,21 +43,32 @@ const ListMixin = {
     if (!this.resource) return;
 
     // Not a container but a single resource
-    if (!this.resource.isContainer?.()) {
+    if (!this.resource.isContainer?.() && !this.arrayField && !this.predicateName) {
       this.setElementAttribute("resource");
       this.appendSingleElt(div);
       return;
     }
-    this.setElementAttribute("container");
-    const listPostProcessors = [...this.listPostProcessors];
-    this.renderCallbacks = [];
-    listPostProcessors.push(this.renderDOM.bind(this));
-    listPostProcessors.push(this.handleEmptyWidget.bind(this));
+    if (this.resource.isContainer?.()) {
+      this.setElementAttribute("container");
+      const listPostProcessors = [...this.listPostProcessors];
+      this.renderCallbacks = [];
+      listPostProcessors.push(this.renderDOM.bind(this));
+      listPostProcessors.push(this.handleEmptyWidget.bind(this));
 
-    // Execute the first post-processor of the list
-    const nextProcessor = listPostProcessors.shift();
-    await nextProcessor(this.resource['ldp:contains'], listPostProcessors, div, this.dataSrc);
+      // Execute the first post-processor of the list
+      const nextProcessor = listPostProcessors.shift();
+      await nextProcessor(this.resource['ldp:contains'], listPostProcessors, div, this.dataSrc);
+    } else if (this.arrayField && this.predicateName && this.resource[this.predicateName]) {
+      this.setElementAttribute("container");
+      const listPostProcessors = [...this.listPostProcessors];
+      this.renderCallbacks = [];
+      listPostProcessors.push(this.renderDOM.bind(this));
+      listPostProcessors.push(this.handleEmptyWidget.bind(this));
 
+      // Execute the first post-processor of the list
+      const nextProcessor = listPostProcessors.shift();
+      await nextProcessor(await this.resource[this.predicateName], listPostProcessors, div, this.dataSrc);
+    }
     // Execute the render callbacks
     for (const renderCallback of this.renderCallbacks) {
       // Render the template in the given parent element