@sitecore-feaas/clientside 0.3.5 → 0.3.7

package/src/dom/rendering.ts

@@ -5,6 +5,7 @@ import { parseHTML } from './html.js'
 import { loadScript } from './scripts.js'
 import { normalizeCollectionScope } from '../utils/datapath.js'
 import { DataOptions } from '../headless.js'
+import { isDate, formatDate } from '../utils/date.js'
 
 export interface FEAASCustomizations {
   processTemplate?: (element: HTMLElement, template: string, data: DataScopes) => string
@@ -132,12 +133,17 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
       // sanitize html of structural text elements
       for (var parent = target; parent.parentElement && parent.localName.match(/^(a|var|strong|em|i|b)$/); )
         parent = parent.parentElement
-      if (parent.localName.match(/p|h\d|button|li/)) {
+      if (parent.localName.match(/p|h\d|button|time|li/)) {
         str = str
           .replace(/<(p|h\d|li|ul)[^>]*?>|<\/(p|h\d|li|ul)[^>]*?>/g, ' ')
           .trim()
           .replace(/\s+/g, ' ')
       }
+      if (String(parent.getAttribute('class')).includes('-inline--time')) {
+        if (isDate(str)) {
+          str = formatDate(new Date(str))
+        }
+      }
 
       if (target.innerHTML != str) {
         target.innerHTML = str

package/src/dom/thumbnail.ts

@@ -152,7 +152,8 @@ export async function generate(component: ComponentModel, version?: VersionModel
   if (!sourceVersion || sourceVersion.isViewEmpty()) {
     return null
   }
-  const { stylesheet, datasources } = component.library
+  const { stylesheet } = component.library
+  const { datasources } = component.sdk
   const img = await render(
     sourceVersion.classList,
     stylesheet.getBreakpointForWidth(800, sourceVersion.getBreakpoints()),

package/src/ui/FEAASContext.tsx

@@ -90,12 +90,16 @@ export class FEAASContext extends FEAASElement<FEAASContextProps, typeof FEAASCo
     this.sdk = sdk
   })
 
+  getPortalRoot() {
+    return this.getRoot()
+  }
+
   render(
     { children, library }: React.PropsWithChildren<FEAASContextProps>,
     { AppContext, Chakra: { Button, Tooltip }, React }: typeof this.payload
   ) {
     const portalProps = {
-      containerRef: { current: this.getRoot() as HTMLElement }
+      containerRef: { current: this.getPortalRoot() as HTMLElement }
     }
     Tooltip.defaultProps = {
       hasArrow: true,

package/src/utils/data.ts

@@ -37,13 +37,13 @@ export function queryScopes(scopes: any, datapath: string, singleValue = false,
       path.replace(/^.*?\./, ''),
       // look up trimmed path in datasource
       //   datasourceId.path
-      path.replace(/^([^.]+).*?\.\$\./, '$1.'),
+      path.replace(/^([^.]+).*?\.\$([\.\[])/, '$1$2'),
       // look up trimmed path in catch all datasource
       //   _.path
-      path.replace(/^.*?\.\$\./, '_.'),
+      path.replace(/^.*?\.\$([\.\[])/, '_$1'),
       // look up trimmed path on root
       // path
-      path.replace(/^.*?\.\$\./, ''),
+      path.replace(/^.*?\.\$([\.\[])/, '$$$1'),
       // for case of top-level object data mapping full path can be replaced to _
       path.replace(/^[^.]+$/, '_')
     ]

package/src/utils/date.ts

@@ -0,0 +1,28 @@
+const monthNames = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+]
+
+export const formatDate = (date: Date) => {
+  if (!date || typeof date.getDay !== 'function') return
+
+  const year = date.getFullYear()
+  const month = monthNames[date.getMonth()]
+  const day = date.getDate()
+
+  return `${month} ${day}, ${year}`
+}
+
+export const isDate = function (date: string) {
+  return String(new Date(date)) !== 'Invalid Date' && !isNaN(Number(new Date(date)))
+}

package/test/dom.test.ts

@@ -126,6 +126,27 @@ describe('DOM Clientside', function () {
         '<div><img data-path-src="context.test.$.image" src="a.jpg" /></div>'
       )
     })
+    it('should fall back to trimmed array path', function () {
+      assertRenderedHTML(
+        `<div><img data-path-src="context.test.$[1:2].image" /></div>`,
+        { context: [{ image: 'a.jpg' }, { image: 'b.jpg' }] },
+        '<div><img data-path-src="context.test.$[1:2].image" src="b.jpg" /></div>'
+      )
+    })
+    it('should fall back to global path when using trimmed array', function () {
+      assertRenderedHTML(
+        `<div><img data-path-src="context.test.$[1:2].image" /></div>`,
+        [{ image: 'a.jpg' }, { image: 'b.jpg' }],
+        '<div><img data-path-src="context.test.$[1:2].image" src="b.jpg" /></div>'
+      )
+    })
+    it('should fall back to catch all path when using trimmed array', function () {
+      assertRenderedHTML(
+        `<div><img data-path-src="context.test.$[1:2].image" /></div>`,
+        { _: [{ image: 'a.jpg' }, { image: 'b.jpg' }] },
+        '<div><img data-path-src="context.test.$[1:2].image" src="b.jpg" /></div>'
+      )
+    })
     it('should fall back to catch all datasource only if path matches', function () {
       assertRenderedHTML(
         `<div><img data-path-src="context.image" /></div>`,

package/types/dom/rendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rendering.d.ts","sourceRoot":"","sources":["../../src/dom/rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAElD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAIvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,MAAM,WAAW,mBAAmB;IAClC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,CAAA;IACtF,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,KAAK,GAAG,CAAA;IAC7D,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;IAC1E,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,OAAO,CAAA;IAC5D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;CAC5D;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,WAAW,IAAI,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAC7E,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,GAAG,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,GAC7C,mBAAmB,CAAA;AAsDrB,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,mBAAmB,QA+EhH;AAID,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,GAAG,gBAAgB,EACrC,UAAU,CAAC,EAAE,GAAG,EAChB,MAAM,CAAC,EAAE,mBAAmB,EAC5B,QAAQ,CAAC,EAAE,OAAO,eA0CnB;AAMD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,mBAAmB,eAc9G;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,mBAAmB,EAAE,OAAO,UAAQ,UAW7G"}
+{"version":3,"file":"rendering.d.ts","sourceRoot":"","sources":["../../src/dom/rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAElD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAIvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,MAAM,WAAW,mBAAmB;IAClC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,CAAA;IACtF,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,KAAK,GAAG,CAAA;IAC7D,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;IAC1E,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,OAAO,CAAA;IAC5D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;CAC5D;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,WAAW,IAAI,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAC7E,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,GAAG,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,GAC7C,mBAAmB,CAAA;AAsDrB,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,mBAAmB,QAoFhH;AAID,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,GAAG,gBAAgB,EACrC,UAAU,CAAC,EAAE,GAAG,EAChB,MAAM,CAAC,EAAE,mBAAmB,EAC5B,QAAQ,CAAC,EAAE,OAAO,eA0CnB;AAMD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,mBAAmB,eAc9G;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,mBAAmB,EAAE,OAAO,UAAQ,UAW7G"}

package/types/dom/thumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.d.ts","sourceRoot":"","sources":["../../src/dom/thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAInF,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;AAE3E,eAAO,MAAM,mBAAmB,WAAY,MAAM,kBAA4C,CAAA;AAE9F,gFAAgF;AAChF,eAAO,MAAM,eAAe,aAAc,QAAQ,KAAG,QAAQ,gBAAgB,CAUzE,CAAA;AAEJ;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,CAG7F;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,QAAQ,6BAqB/F;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CACxB,SAAS,EAAE,cAAc,EACzB,OAAO,CAAC,EAAE,YAAY,EACtB,QAAQ,CAAC,EAAE,QAAQ,GAClB,OAAO,CAAC,gBAAgB,CAAC,CAmC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,QAAQ,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,6BAkB/E;AAuFD;;;;;;;;;;;GAWG;AACH,wBAAsB,MAAM,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CA+B1G"}
+{"version":3,"file":"thumbnail.d.ts","sourceRoot":"","sources":["../../src/dom/thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAInF,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;AAE3E,eAAO,MAAM,mBAAmB,WAAY,MAAM,kBAA4C,CAAA;AAE9F,gFAAgF;AAChF,eAAO,MAAM,eAAe,aAAc,QAAQ,KAAG,QAAQ,gBAAgB,CAUzE,CAAA;AAEJ;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,CAG7F;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,QAAQ,6BAqB/F;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CACxB,SAAS,EAAE,cAAc,EACzB,OAAO,CAAC,EAAE,YAAY,EACtB,QAAQ,CAAC,EAAE,QAAQ,GAClB,OAAO,CAAC,gBAAgB,CAAC,CAmC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,QAAQ,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,6BAmB/E;AAuFD;;;;;;;;;;;GAWG;AACH,wBAAsB,MAAM,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CA+B1G"}