@sitecore-feaas/clientside 0.0.1 → 0.0.3

package/src/cloud.ts

@@ -4,31 +4,31 @@ export interface CloudTemplate {
   hostname?: string
   library: string
   component: string
-  variant: string
-  version?: string
+  version: string
+  revision?: string
 }
 export interface CloudStylesheet {
   hostname?: string
   library: string
-  version?: string
+  revision?: string
 }
 
 export function getComponentURL({
   hostname = 'https://feaascomponentsapidev.blob.core.windows.net',
   library,
   component,
-  variant,
-  version = 'published'
+  version,
+  revision = 'published'
 }: CloudTemplate) {
-  return `${hostname}/components/${component}/variants/${variant}/${version}.html`
+  return `${hostname}/components/${library}/${component}/${version}/${revision}.html`
 }
 
 export function getStylesheetURL({
   hostname = `https://feaascomponentsapidev.blob.core.windows.net`,
   library,
-  version = 'published'
+  revision = 'published'
 }: CloudStylesheet) {
-  return `${hostname}/styles/${library}/${version}.css`
+  return `${hostname}/styles/${library}/${revision}.css`
 }
 
 export async function fetchComponent(props: CloudTemplate, callback: (html: string) => void) {
@@ -36,7 +36,7 @@ export async function fetchComponent(props: CloudTemplate, callback: (html: stri
     getComponentURL(props),
     {},
     (response) => {
-      return response.headers.get('x-ms-meta-variantDeletedAt') == null
+      return response.headers.get('x-ms-meta-versionDeletedAt') == null
     },
     (response) => {
       response.text().then(callback)

package/src/dom.ts

@@ -115,7 +115,7 @@ export function queryScopes(scopes: any, datapath: string, singleValue = false,
     path: path,
     json: json
   })
-  if (singleValue && collection) {
+  if (singleValue && collection && Array.isArray(collection)) {
     return collection[0]
   } else {
     return collection
@@ -133,6 +133,8 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
     target = element.tagName == 'IMG' ? element : <HTMLElement>element.querySelector('img, video')
   } else if (attribute == 'data-path-href') {
     target = element.querySelector('a') || element.closest('a')
+  } else if (attribute == 'data-path-alt') {
+    target = element.querySelector('img, picture')
   } else if (attribute == 'data-path-hidden') {
     value = !value ? true : null
   } else if (attribute == 'data-path' || attribute == 'data-embed-html' || attribute == 'html') {
@@ -258,7 +260,7 @@ export function renderDOMElement(
         [normalizeCollectionScope(datascope)]: collection[index]
       }
     }
-    const attrs = Array.prototype.slice.call(element.attributes).sort((a, b) => {
+    const attrs = Array.prototype.slice.call(element.attributes).sort((a: Attr, b: Attr) => {
       return sortOrder.indexOf(a.name) - sortOrder.indexOf(b.name)
     })
     for (var i = 0; i < attrs.length; i++) {

package/src/react.ts

@@ -17,14 +17,14 @@ export function Component(props: FEAASComponentProps) {
       if (template == null && !('template' in props)) {
         fetchComponent(props, setTemplate).catch(() => {
           console.error(
-            `FEAAS: Could not fetch component: ${props.library}/${props.component}/${props.variant}/${props.version}`
+            `FEAAS: Could not fetch component: ${props.library}/${props.component}/${props.version}/${props.revision}`
           )
         })
       }
     },
     'template' in props
       ? [props.template, null, null, null]
-      : [props.library, props.component, props.variant, props.version, props.hostname]
+      : [props.library, props.component, props.version, props.revision, props.hostname]
   )
 
   React.useEffect(() => {

package/src/webcomponent.ts

@@ -8,8 +8,8 @@ declare global {
         data?: any
         library: string
         component: string
-        variant: string
-        version?: string
+        version: string
+        revision?: string
         hostname?: string
         template?: string
         children?: any
@@ -28,7 +28,7 @@ var WebComponent = typeof HTMLElement == 'undefined' ? (class {} as unknown as t
 
 export class HTMLFeaasComponent extends WebComponent {
   static get observedAttributes() {
-    return ['data', 'library', 'component', 'variant', 'version', 'hostname', 'template']
+    return ['data', 'library', 'component', 'version', 'revision', 'hostname', 'template']
   }
   connected = false
 
@@ -101,7 +101,7 @@ export class HTMLFeaasComponent extends WebComponent {
     const newProps = this.getProps()
     if (this.template == null) {
       if (!this.isFetching) {
-        if (newProps.component != null && newProps.variant != null) {
+        if (newProps.component != null && newProps.version != null) {
           this.isFetching = true
           fetchComponent(newProps, (template) => {
             this.template = template
@@ -109,7 +109,7 @@ export class HTMLFeaasComponent extends WebComponent {
             renderDOMContent(this, this.template, newProps.data)
           }).catch(() => {
             console.error(
-              `FEAAS: Could not fetch component: ${newProps.component}/${newProps.variant}/${newProps.version}`
+              `FEAAS: Could not fetch component: ${newProps.component}/${newProps.version}/${newProps.revision}`
             )
           })
         }
@@ -124,8 +124,8 @@ export class HTMLFeaasComponent extends WebComponent {
       data: this.getData(),
       library: (this.getAttribute('library') || undefined) as string,
       component: (this.getAttribute('component') || undefined) as string,
-      variant: (this.getAttribute('variant') || undefined) as string,
       version: (this.getAttribute('version') || undefined) as string,
+      revision: (this.getAttribute('revision') || undefined) as string,
       hostname: (this.getAttribute('hostname') || undefined) as string
     }
   }
@@ -133,7 +133,7 @@ export class HTMLFeaasComponent extends WebComponent {
 
 export class HTMLFeaasStylesheet extends WebComponent {
   static get observedAttributes() {
-    return ['library', 'version', 'hostname']
+    return ['library', 'revision', 'hostname']
   }
   connected = false
   connectedCallback() {
@@ -157,7 +157,7 @@ export class HTMLFeaasStylesheet extends WebComponent {
   getProps() {
     return {
       library: (this.getAttribute('library') || undefined) as string,
-      version: (this.getAttribute('version') || undefined) as string,
+      revision: (this.getAttribute('revision') || undefined) as string,
       hostname: (this.getAttribute('hostname') || undefined) as string
     }
   }

package/test/render.ts

@@ -7,7 +7,10 @@ const { renderDOMElement } = FEAAS
 function assertScriptLoaded(element: HTMLElement, src: string) {
   console.log(element.closest('html').innerHTML)
   assert.equal(
-    Array.prototype.find.call(element.closest('html').querySelectorAll('script'), (s) => s.src == src)?.src,
+    Array.prototype.find.call(
+      element.closest('html').querySelectorAll('script'),
+      (s: HTMLScriptElement) => s.src == src
+    )?.src,
     src
   )
 }

package/tsconfig.json

@@ -8,5 +8,5 @@
     "types": ["react", "react-dom"]
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["**/node_modules", "**/dist"]
+  "exclude": ["../**/node_modules", "../**/dist", "../**/build"]
 }

package/{webcomponent-189a307d.d.ts → webcomponent-7a0e7c34.d.ts}

@@ -2,16 +2,16 @@ interface CloudTemplate {
     hostname?: string;
     library: string;
     component: string;
-    variant: string;
-    version?: string;
+    version: string;
+    revision?: string;
 }
 interface CloudStylesheet {
     hostname?: string;
     library: string;
-    version?: string;
+    revision?: string;
 }
-declare function getComponentURL({ hostname, library, component, variant, version }: CloudTemplate): string;
-declare function getStylesheetURL({ hostname, library, version }: CloudStylesheet): string;
+declare function getComponentURL({ hostname, library, component, version, revision }: CloudTemplate): string;
+declare function getStylesheetURL({ hostname, library, revision }: CloudStylesheet): string;
 declare function fetchComponent(props: CloudTemplate, callback: (html: string) => void): Promise<Response>;
 declare function fetchStylesheet(props: CloudStylesheet, callback: (css: string) => void): Promise<Response>;
 
@@ -51,8 +51,8 @@ declare global {
                 data?: any;
                 library: string;
                 component: string;
-                variant: string;
-                version?: string;
+                version: string;
+                revision?: string;
                 hostname?: string;
                 template?: string;
                 children?: any;
@@ -95,7 +95,7 @@ declare class HTMLFeaasStylesheet extends WebComponent {
     render(): void;
     getProps(): {
         library: string;
-        version: string;
+        revision: string;
         hostname: string;
     };
 }