@sitecore-feaas/clientside 0.3.0 → 0.3.2

package/src/components/FEAASComponent.tsx

@@ -2,7 +2,7 @@ import { DEFAULT_CDN_URL, FEAASCDNComponentParams, fetchAndRevalidateComponent,
 import { renderDOMContent, renderDOMElement } from '../dom/rendering.js'
 import { loadStylesheetAllowStale } from '../headless.js'
 import { ControlledPromise } from '../utils/promise.js'
-import { fetchData } from '../utils/fetch.js'
+import { DataOptions, DataSettings } from '../utils/settings.js'
 import { FEAASElement } from './FEAASElement.js'
 
 export function FEAASComponentsProps(element: FEAASElement) {
@@ -25,7 +25,7 @@ export function FEAASComponentsProps(element: FEAASElement) {
   }
 
   return {
-    data: data || {},
+    data: (data || {}) as DataOptions,
     cdn: element.getContextAttribute('cdn') ?? cdn ?? DEFAULT_CDN_URL,
     library: element.getAttribute('library') ?? library,
     component: element.getAttribute('component') ?? component,
@@ -94,12 +94,13 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
     version: 'responsive',
     withStylesheet: true,
     editable: false,
-    suspended: false
+    suspended: false,
+    data: {}
   } as Partial<FEAASComponentsProps>
 
   needsRefresh: boolean
 
-  setData(data: any) {
+  setData(data: DataOptions) {
     this.set({ data })
   }
 
@@ -107,6 +108,10 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
     return FEAASComponentsProps(this)
   }
 
+  isJSONAttribute(prop: keyof FEAASComponentsProps) {
+    return prop == 'data'
+  }
+
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     if (oldValue === newValue) return
 
@@ -130,7 +135,7 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
 
     this.whenDataReady = this.whenDataReady.restart()
 
-    const data = await fetchData(this.props.data)
+    const data = await DataSettings.fetch(this.props.data)
 
     const alreadyRendered = this.alreadyRendered
 
@@ -253,6 +258,7 @@ declare global {
     interface IntrinsicElements {
       'feaas-component': {
         data?: any
+        suppressHydrationWarning?: boolean
         template?: string
         instance?: string
         editable?: boolean

package/src/components/FEAASElement.tsx

@@ -137,6 +137,10 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
     }
   }
 
+  isJSONAttribute(attribute: keyof Props) {
+    return false
+  }
+
   log(...args: any) {
     if (typeof process != 'undefined' && process.env.TESTING) return
     console.log(...args)
@@ -445,12 +449,23 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
         ...this.overrides
       }
       for (var property in this.props) {
+        const isJSON = this.isJSONAttribute(property)
         const value = this.props[property]
+        const valueAsString = isJSON ? JSON.stringify(value) : String(value)
+        const defaultValue = this.defaultProps[property as keyof typeof this.defaultProps]
+        const defaultValueAsString = isJSON ? JSON.stringify(defaultValue) : String(defaultValue)
         const attribute = property.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
-        if (value == null || value === this.defaultProps[property as keyof typeof this.defaultProps]) {
+        const oldValue = this.getAttribute(attribute)
+        try {
+          var odlValueAsString: string = isJSON ? JSON.stringify(JSON.parse(oldValue)) : oldValue
+        } catch (e) {
+          var odlValueAsString: string = null
+        }
+
+        if (value == null || valueAsString === defaultValueAsString) {
           this.removeAttribute(attribute)
-        } else if (typeof value == 'string' || typeof value == 'number' || typeof value == 'boolean') {
-          if (this.getAttribute(attribute) != String(value)) this.setAttribute(attribute, String(value))
+        } else if (typeof value == 'string' || typeof value == 'number' || typeof value == 'boolean' || isJSON) {
+          if (odlValueAsString != valueAsString) this.setAttribute(attribute, valueAsString)
         }
       }
     } catch (e) {

package/src/dom/component.ts

@@ -1,8 +1,8 @@
 import { fetchAndRevalidateComponent } from '../cdn.js'
-import { Datascopes } from './data.js'
+import { DataScopes } from '../utils/settings.js'
 import { FEAASComponentProps, renderDOMContent, renderDOMElement } from './rendering.js'
 
-export function renderComponentElement(content: string, datasources?: Datascopes) {
+export function renderComponentElement(content: string, datasources?: DataScopes) {
   const wrapper = document.createElement('div')
   wrapper.innerHTML = content
   const fragment = document.createDocumentFragment()

package/src/dom/html.ts

@@ -1,6 +1,6 @@
 /** Lightweight DOM parser and serializer to use in server environments */
 
-import { Datascopes } from './data.js'
+import { DataScopes } from '../utils/settings.js'
 import { FEAASCustomizations, renderDOMElement } from './rendering.js'
 
 type HTMLAttribute = { name: string; value: string }
@@ -323,7 +323,7 @@ export function serializeHTML(nodes: HTMLNode[]): string {
     .join('')
 }
 
-export function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations) {
+export function renderHTMLContent(template: string, data?: DataScopes, config?: FEAASCustomizations) {
   const newTemplate = config?.processTemplate?.(null, template, data) || template
   const nodes = parseHTML(newTemplate)
   return renderDOMElement(nodes[0] as unknown as HTMLElement, data, config).outerHTML

package/src/dom/rendering.ts

@@ -1,22 +1,24 @@
 import { FEAASCDNComponentProps } from '../cdn.js'
-import { Datascopes, queryScopes, serializeCH1RichText } from './data.js'
+import { queryScopes, serializeCH1RichText } from '../utils/data.js'
+import { Data, DataScopes } from '../utils/settings.js'
 import { parseHTML } from './html.js'
 import { loadScript } from './scripts.js'
 import { normalizeCollectionScope } from '../utils/datapath.js'
+import { DataOptions } from '../headless.js'
 
 export interface FEAASCustomizations {
-  processTemplate?: (element: HTMLElement, template: string, data: any) => string
-  processData?: (element: HTMLElement, data: any) => any
+  processTemplate?: (element: HTMLElement, template: string, data: DataScopes) => string
+  processData?: (element: HTMLElement, data: DataScopes) => any
   processValue?: (element: HTMLElement, property: string, value: any) => any
   shouldRepeat?: (element: HTMLElement, value: any) => boolean
-  onRender?: (element: HTMLElement, data: any) => void
+  onRender?: (element: HTMLElement, data: DataScopes) => void
 }
 
 export interface ExplicitTemplate {
   template: string
 }
 
-export type FEAASComponentProps<T = Datascopes> = Partial<ExplicitTemplate> & {
+export type FEAASComponentProps<T = DataOptions> = Partial<ExplicitTemplate> & {
   data?: T
 } & (ExplicitTemplate | FEAASCDNComponentProps) &
   FEAASCustomizations
@@ -197,7 +199,7 @@ function isElement(node: Node): node is HTMLElement {
   return node.nodeType == 1
 }
 
-export function renderDOMContent(root: HTMLElement, template: string, data?: Datascopes, config?: FEAASCustomizations) {
+export function renderDOMContent(root: HTMLElement, template: string, data?: Data, config?: FEAASCustomizations) {
   const newTemplate = config?.processTemplate?.(root, template, data) || template
   root.innerHTML = newTemplate
   root.classList.add('-feaas')
@@ -213,7 +215,7 @@ export function renderDOMContent(root: HTMLElement, template: string, data?: Dat
   return renderDOMElement(root, data, config)
 }
 
-export function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations, fakeDOM = false) {
+export function renderHTMLContent(template: string, data?: Data, config?: FEAASCustomizations, fakeDOM = false) {
   const newTemplate = config?.processTemplate?.(null, template, data) || template
   if (typeof document === 'undefined' || fakeDOM) {
     const nodes = parseHTML(newTemplate)

package/src/headless.ts

@@ -6,7 +6,7 @@
 import FEAASReactElement from './components/FEAASReactElement.js'
 
 export * from './dom/rendering.js'
-export * from './dom/data.js'
+export * from './utils/data.js'
 export * from './dom/scripts.js'
 export * from './dom/stylesheet.js'
 export * from './dom/component.js'
@@ -20,10 +20,10 @@ export * from './components/FEAASLoader.js'
 export * from './components/FEAASStylesheet.js'
 export * from './utils/datapath.js'
 export * as DOM from './dom/rendering.js'
-export * as Datascope from './dom/data.js'
-export * as Datapath from './utils/datapath.js'
-export * from './utils/fetch.js'
-export * as DataSettings from './utils/settings.js'
+export * as DataScope from './utils/data.js'
+export * as DataPath from './utils/datapath.js'
+export { DataSettings, fetchData } from './utils/settings.js'
+export type { Data, DataOptionsById, DataOptions, DataScopes } from './utils/settings.js'
 export * as Thumbnail from './dom/thumbnail.js'
 
 declare global {

package/src/ui/FEAASExternal.tsx

@@ -232,6 +232,14 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
       props?.src || (typeof window !== 'undefined' ? window.location.search.match(/feaasSrc=([^&]+)/)?.[1] : null)
     return src ? <Component src={src} {...props} /> : null
   }
+
+  static linkComponents(components: Promise<any>[]): () => any {
+    return () => components.map((components) => null)
+  }
+
+  static getComponent(id: string) {
+    return FEAASExternal.registered[id]
+  }
 }
 
 declare global {
@@ -251,4 +259,6 @@ FEAASExternal.register('feaas-external')
 FEAASExternal.setRegistrationCallback()
 
 export const registerComponent = FEAASExternal.registerComponent
+export const linkComponents = FEAASExternal.linkComponents
+export const getComponent = FEAASExternal.getComponent
 export { FEAASExternal as External }

package/src/ui/FEAASPicker.tsx

@@ -46,6 +46,12 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
     const components = useLibrary('components')
     const rules = useLibrary('stylesheet.styles')
     const component = components.find((c) => c.id == context?.getAttribute('component'))
+    var settings = context?.getAttribute('data')
+    if (settings) {
+      try {
+        settings = JSON.parse(settings)
+      } catch (e) {}
+    }
     return (
       <Picker
         rules={rules}
@@ -53,9 +59,11 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
         themeContext={context}
         placeholder={placeholder}
         component={component}
-        versionId={context.getAttribute('version')}
-        mode={mode || 'component'}
+        data={settings}
+        versionId={context?.getAttribute('version')}
+        mode={mode || (component ? 'component' : null)}
         setAttribute={(context, attribute, value) => {
+          if (attribute == 'data' && value) value = JSON.stringify(value)
           this.props.setAttribute(context, attribute, value)
           forceRender()
         }}

package/src/ui/react.tsx

@@ -7,29 +7,34 @@ import {
 } from './index.js'
 import React from 'react'
 import { renderHTMLContent } from '../dom/html.js'
-import { fetchData } from '../utils/fetch.js'
+import { DataSettings } from '../utils/settings.js'
 
 export { renderHTMLContent }
-export { External } from './FEAASExternal.js'
+export { External, linkComponents, registerComponent, getComponent } from './FEAASExternal.js'
 export * from './index.js'
 export * from '../headless.js'
 
-export const ServerComponent = async (props: FEAASComponentProps<any>) => {
-  const fetchedData = await fetchData(props?.data || {})
+export type FEAASReactComponentProps = FEAASComponentProps & {
+  src?: string
+  preload?: boolean
+  lastModified?: Date | string
+}
+export const ServerComponent = async (props: FEAASComponentProps) => {
+  const fetchedData = await DataSettings.fetch(props?.data || {})
 
-  const p = { ...props }
+  const p: FEAASReactComponentProps = { ...props }
 
-  if (('src' in p || 'component' in p) && p?.template == null) {
-    const response = await fetchComponent(p)
+  if (('src' in props || 'component' in props) && props?.template == null) {
+    const response = await fetchComponent(props)
 
     p.template = response.template
-    // p.lastModified = response.lastModified
+    p.lastModified = response.lastModified
   }
 
-  return FEAASEmbed({ ...p, data: fetchedData })
+  return FEAASReactComponent({ ...p, data: fetchedData })
 }
 
-export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any> & { src?: string; preload?: boolean }) {
+export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps) {
   let html = ''
   let preload = null
 
@@ -39,6 +44,13 @@ export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any> & { src?
 
   if ('src' in props) {
     props = { ...parseComponentSource(props.src), ...props }
+  } else if (!('template' in props)) {
+    if (!props.version) {
+      props = {
+        ...props,
+        version: 'responsive'
+      }
+    }
   }
 
   return (
@@ -51,6 +63,7 @@ export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any> & { src?
       )}
       <feaas-component
         {...props}
+        suppressHydrationWarning={true}
         template={null}
         data={typeof data == 'string' ? data : data ? JSON.stringify(data) : null}
         dangerouslySetInnerHTML={{ __html: html || '' }}
@@ -59,4 +72,4 @@ export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any> & { src?
   )
 }
 
-export const Component = FEAASEmbed
+export const Component = FEAASReactComponent

package/src/{dom → utils}/data.ts

@@ -1,6 +1,8 @@
 import { JSONPath } from 'jsonpath-plus'
 
-export type Datascopes = Record<string, any> | any[]
+export function queryObject(json: any, path: string) {
+  return JSONPath({ path, json })
+}
 
 export function queryScopes(scopes: any, datapath: string, singleValue = false, json: any = scopes) {
   var path = datapath

package/src/utils/datapath.ts

@@ -20,16 +20,21 @@ export const parseRange = (qualifier: string) => {
   return bits.join(',')
 }
 
-export const getQualifier = (jsonpath: string) => jsonpath?.match(/(\.\*|\[[^\]]+\])$/)?.[0]
+export const getQualifier = (jsonpath: string) => jsonpath?.match(/(\.\*|\[[^\]]*\])$/)?.[0]
 
 export function cleanCollectionBit(path: string) {
-  return path.replace(/(\[[^\]\[]+\]|\.\*)$/g, '')
+  return path.replace(/(\.?\[[^\]\[]*\]|\.\*)$/g, '')
 }
 
 export function normalizeCollectionScope(path: string) {
   return cleanCollectionBit(path) + '.*'
 }
 
+// increment numbers by given numbers, exclude second value of ranges to ensure inclusivity
+export function adjustNumbers(string: string, diff: number) {
+  return string?.replace(/(.|^)(\d+)/g, (m, b, n) => b + (b == ':' ? n : String(parseInt(n) + diff)))
+}
+
 export function getHumanizedLabel(path: string, maxBits = 2) {
   var bits = cleanCollectionBit(path)
     .split(/]\.|\.\*\./g)

package/src/utils/settings.ts

@@ -1,69 +1,200 @@
-export function clean(settings: any) {
-  let cleanSettings = {}
-
-  const hasNoBody =
-    settings?.method === 'GET' || settings?.method === 'HEAD' || Object.keys(settings?.body || {}).length === 0
-
-  const hasNoHeaders =
-    settings.headers &&
-    (Object.keys(settings.headers).length === 0 ||
-      (Object.keys(settings.headers).length === 1 &&
-        (settings.headers['Content-type'] || settings.headers['Content-Type']) &&
-        (settings.headers['Content-type'] === 'application/json' ||
-          settings.headers['Content-Type'] === 'application/json')))
-
-  const hasNoParams = settings.params || Object.keys(settings.params || {}).length === 0
-
-  if (settings.method && settings.method !== 'GET') cleanSettings = { ...cleanSettings, method: settings.method }
-  if (settings.body && !hasNoBody) cleanSettings = { ...cleanSettings, body: settings.body }
-  cleanSettings = {
-    ...cleanSettings,
-    headers: hasNoHeaders ? { 'Content-type': 'application/json' } : settings.headers
-  }
-  if (settings.params && !hasNoParams) cleanSettings = { ...cleanSettings, params: settings.params }
+import { queryObject } from './data.js'
 
-  return { ...cleanSettings, url: settings.url || '' }
-}
+export type DataSourceId = string
 
-export function toFetchArguments(settings?: any): Parameters<typeof fetch> {
-  const normalized = normalize(settings)
+// Fully resolved data - object or array
+export type Data = Record<string, any> | any[]
 
-  let body = null
+// Data keyed by datasource id
+export type DataScopes = Data | Record<DataSourceId, Data>
 
-  const contentType = normalized.headers['Content-Type'] || normalized.headers['Content-type']
+// Data settings is json object representing fetch call
+export type DataSettings = ReturnType<typeof DataSettings>
 
-  const isJson = contentType === 'application/json'
-  const isForm = contentType === 'multipart/form-data'
-  const isUrlEncoded = contentType === 'application/x-www-form-urlencoded'
+// Data options/samples indexed by id
+export type DataOptionsById = Record<DataSourceId, DataSettings | Data>
 
-  if (isJson) body = JSON.stringify(normalized.body)
-  if (isForm)
-    body = Object.keys(normalized.body).reduce((form: any, key) => {
-      form.append(key, normalized.body[key])
-      return form
-    }, new FormData())
-  if (isUrlEncoded) body = new URLSearchParams(normalized.body)
+// Data options combines of the above: data, settings, plain or keyed by datasource id
+export type DataOptions = Data | DataSettings | DataOptionsById
 
-  const params = Object.keys(normalized.params).length ? `?${new URLSearchParams(normalized.params)}` : ''
+/**
+ * Cleans the provided settings object by removing unnecessary properties that match the defaults that will be re-added
+ * back through normalizations. This method is used for code generated for the user, neant to make it look neater.
+ *
+ * @param {any} settings  - The settings object to be cleaned.
+ * @returns {Object} - The cleaned settings object.
+ */
+export function clean(settings: any) {
+  const { params, method, headers, body, url } = DataSettings(settings)
+  var cleanSettings = { url } as Partial<DataSettings>
+  var cleanHeaders = { ...headers }
+  if (headers['Content-Type'] === 'application/json') delete cleanHeaders['Content-Type']
+  if (headers['Accept'] === 'application/json') delete cleanHeaders['Accept']
+  if (Object.keys(cleanHeaders).length > 0) {
+    cleanSettings.headers = cleanHeaders
+  }
+  if (method !== 'GET') {
+    cleanSettings.method = method
+  }
+  if (!(method === 'GET' || method === 'HEAD' || Object.keys(body).length === 0)) {
+    cleanSettings.body = body
+  }
+  if (Object.keys(params).length > 0) {
+    cleanSettings = { ...cleanSettings, params }
+  }
+  return cleanSettings
+}
 
-  let url = `${normalized.url}${params}`
+/**
+ * Checks if the provided data is of type DataSettings by checking if all keys are recognized as settings keys.
+ *
+ * @param {any} data  - The data to be checked.
+ * @returns {boolean} - True if the data is of type DataSettings, false otherwise.
+ */
+export const isDataSettings = (data: any): data is DataSettings => {
+  if (typeof data.url != 'string') return false
+
+  for (var property in data) {
+    if (
+      property == 'body' ||
+      property == 'params' ||
+      property == 'headers' ||
+      property == 'url' ||
+      property === 'method' ||
+      (property == 'jsonpath' && typeof data[property] == 'string')
+    ) {
+      continue
+    }
+
+    return false
+  }
 
-  let options: any = {}
+  return true
+}
 
-  if (body) options.body = body
-  if (Object.keys(normalized.headers).length) options.headers = normalized.headers
-  if (normalized.method !== 'GET') options.method = normalized.method
+/**
+ * Converts settings object into fetch function arguments.
+ *
+ * @param {any} settings  - The settings object.
+ * @returns {Array} - An array containing URL and options objects as fetch function arguments.
+ */
+export function toFetchArguments(settings?: any): Parameters<typeof fetch> {
+  const { url, headers, params, method, body: payload } = DataSettings(settings)
+
+  let body = undefined
+
+  const contentType = headers['Content-Type']
+
+  if (method != 'GET' && method != 'HEAD') {
+    if (contentType === 'application/json') body = JSON.stringify(payload)
+    if (contentType === 'multipart/form-data')
+      body = Object.keys(payload).reduce((form, key) => {
+        form.append(key, (payload as any)[key])
+        return form
+      }, new FormData())
+    if (contentType === 'application/x-www-form-urlencoded') body = new URLSearchParams(payload)
+  }
+
+  const query = Object.keys(params).length ? `?${new URLSearchParams(params)}` : ''
 
-  return [url, options]
+  return [
+    `${url}${query}`,
+    {
+      headers,
+      body,
+      method
+    }
+  ]
 }
 
-export function normalize(settings: any) {
+/**
+ * Creates a DataSettings object based on the provided settings. These settings are used later to fetch data for the
+ * component. It's essentially fetch options with url.
+ *
+ * @param {any} settings  - The settings object.
+ * @returns {DataSettings} - The DataSettings object.
+ */
+export function DataSettings(settings: any) {
+  const headers = {} as any
+  for (const key in settings?.headers || {}) {
+    if (settings.headers.hasOwnProperty(key)) {
+      const headerCase = key.replace(/^[a-z]|\-[a-z]/g, (m) => m.toUpperCase())
+      headers[headerCase] = settings.headers[key]
+    }
+  }
+  if (!headers.Accept) headers['Accept'] = 'application/json'
   return {
-    params: settings?.params || {},
-    headers: settings?.headers || {},
-    jsonpath: settings?.jsonpath || '$',
-    method: settings?.method || 'GET',
-    body: settings?.body || {},
-    url: settings?.url || ''
+    params: (settings?.params || {}) as Record<string, any>,
+    headers: headers as Record<string, string>,
+    jsonpath: String(settings?.jsonpath || '$'),
+    method: (settings?.method || 'GET').toUpperCase() as
+      | 'GET'
+      | 'POST'
+      | 'OPTIONS'
+      | 'PUT'
+      | 'DELETE'
+      | 'UPDATE'
+      | 'HEAD',
+    body: (settings?.body || {}) as Record<string, any>,
+    url: String(settings?.url || '')
+  }
+}
+/**
+ * Fetches data based on the provided settings. It is expected that reesponse is json (forced by Accept header)
+ *
+ * @param {DataSettings} settings  - The data settings.
+ * @returns {Promise<Data>} - A promise that resolves to the fetched data.
+ */
+const fetchDataSettings = async (settings: DataSettings): Promise<Data> => {
+  try {
+    const [url, options] = toFetchArguments(settings)
+    const response = await DataSettings.fetchImplementation(url, {
+      ...options,
+      // next.js only allows lowercase method
+      method: options.method.toLowerCase()
+    })
+    const json = await response.json()
+    if (settings.jsonpath && settings.jsonpath != '$') {
+      return queryObject(json, settings.jsonpath)
+    }
+    return json
+  } catch (e) {
+    return {}
   }
 }
+/**
+ * Fetches data based on the provided data options. Options is a union of different types, settngs, data or
+ * datasource-id keyed settings/data. If the function doesnt find settings in the object, it returns it as is. It
+ * supports mixing of static and fetched data. If multiple data settings are found, requests are made in parallel.
+ *
+ * @param {DataOptions} data  - The data options.
+ * @returns {Promise<DataScopes>} - A promise that resolves to the fetched data.
+ */
+export async function fetchData(data: DataOptions): Promise<DataScopes> {
+  if (!data) return data
+
+  if (isDataSettings(data)) return fetchDataSettings(data)
+
+  const keys = Object.keys(data)
+
+  const allRequests = await Promise.all(
+    keys
+      .map((key: keyof typeof data) => (isDataSettings(data[key]) ? fetchDataSettings(data[key]) : null))
+      .filter(Boolean)
+  )
+
+  return keys.reduce(
+    (obj, key: keyof typeof data) => ({
+      ...obj,
+      [key]: isDataSettings(data[key]) ? allRequests.shift() : data[key]
+    }),
+    {}
+  )
+}
+
+DataSettings.clean = clean
+DataSettings.toFetchArguments = toFetchArguments
+DataSettings.fetchOne = fetchDataSettings
+DataSettings.fetch = fetchData
+DataSettings.isDataSettings = isDataSettings
+DataSettings.fetchImplementation = (...args: Parameters<typeof fetch>) => fetch(...args)