@sitecore-feaas/clientside 0.0.2 → 0.0.4

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
@@ -19,6 +19,10 @@ declare global {
         hostname?: string
         children?: any
       }
+      'feaas-picker': {
+        library: string
+        mode?: string
+      }
     }
   }
 }
@@ -28,13 +32,14 @@ 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
 
   template: string = null
   data: any = undefined
   isFetching: boolean = false
+  rendering: ReturnType<typeof requestAnimationFrame>
 
   connectedCallback() {
     this.connected = true
@@ -47,11 +52,16 @@ export class HTMLFeaasComponent extends WebComponent {
     if (!this.connected) return
     if (name == 'template') {
       this.template = newValue
+    } else if (name != 'date') {
+      this.template = null
     }
     if (name == 'data' && this.children.length > 0) {
       this.update()
     } else {
-      this.render()
+      cancelAnimationFrame(this.rendering)
+      this.rendering = requestAnimationFrame(() => {
+        this.render()
+      })
     }
   }
 
@@ -101,7 +111,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 +119,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 +134,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 +143,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,13 +167,206 @@ 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
     }
   }
 }
+export interface PickerProps<T = HTMLElement> {
+  children?: any
+  context?: T
+  isOpen?: boolean
+  mode?: 'library' | 'stylesheet'
+  src?: string
+  onClose?: () => any
+}
+export interface HTMLFeaasPickerProps extends Omit<PickerProps<HTMLElement>, 'children'> {
+  getAccessTokenSilently: (options: any) => Promise<string>
+  library: string
+}
+
+interface HTMLFeaasPickerLazy extends HTMLFeaasPickerProps {}
+class HTMLFeaasPickerLazy extends WebComponent {
+  static get observedAttributes() {
+    return ['library', 'mode', 'hidden', 'src']
+  }
+
+  src = 'https://components.sitecorecloud.io/assets/picker.js'
+
+  script: HTMLScriptElement
+  element: HTMLFeaasPickerLazy
+  loader: HTMLFeaasLoader
+
+  connectedCallback() {
+    this.loader = document.createElement('feaas-loader') as HTMLFeaasLoader
+    this.loader.style.cssText = 'position: absolute; top: 0; left: 0; right: 0;bottom: 0; '
+    this.appendChild(this.loader)
+  }
+
+  load() {
+    if (!this.script) {
+      this.script = document.createElement('script')
+      this.script.type = 'module'
+      this.script.onload = this.onScriptLoaded
+      this.script.src = this.src
+      this.appendChild(this.script)
+    }
+  }
+
+  getProps() {
+    return {
+      mode: this.getAttribute('mode') as PickerProps['mode'],
+      library: this.getAttribute('library'),
+      src: this.getAttribute('src')
+    }
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    this.set(this.getProps())
+  }
+
+  set(options: Partial<HTMLFeaasPickerProps>) {
+    Object.assign(this, options)
+    const keys = Object.keys(this.getProps())
+    for (var key of keys) {
+      const value = this[key as keyof typeof this]
+      if (value == null) {
+        this.removeAttribute(key)
+        this.load()
+      } else if (this.getAttribute(key) != String(value)) {
+        this.setAttribute(key, String(value))
+      }
+    }
+    if (this.mode) {
+      this.removeAttribute('hidden')
+    } else if (this.getAttribute('hidden') == null) {
+      this.setAttribute('hidden', 'hidden')
+    }
+    if (this.element && this.element.set) {
+      this.element.onClose = this.onClose
+      this.element.set(options)
+    }
+  }
+
+  onClose = () => {
+    this.set({
+      mode: null
+    })
+  }
+
+  onScriptLoaded = () => {
+    this.element = document.createElement('feaas-picker') as HTMLFeaasPickerLazy
+    this.element.style.cssText = 'border: 0; width: 100%; height: 100%; display: block'
+    this.appendChild(this.element)
+    this.set(this.getProps())
+  }
+}
+
+class HTMLFeaasLoader extends WebComponent {
+  stylesheet: HTMLStyleElement
+  root: ShadowRoot
+  loader: HTMLDivElement
+
+  static get observedAttributes() {
+    return ['hidden']
+  }
+  connectedCallback() {
+    this.style.opacity = '1'
+    this.style.transition = 'opacity 0.2s 0.6s'
+    this.stylesheet = document.createElement('style')
+    this.stylesheet.textContent = `
+#loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f6f6ff;
+  z-index: 1000;
+  opacity: 1;
+  transition: top 0.3s, background-color 0.7s 0.3s;
+}
+@keyframes loader-disappearance {
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes loader-appearance {
+  0% {
+    opacity: 0;
+  }
+}
+@keyframes loader-circular-track {
+  0% {
+    stroke-dasharray: 1, 400;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -100;
+  }
+  100% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -260;
+  }
+}
+
+@keyframes loader-circular-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+#loader .spinner {
+  animation: loader-disappearance 0.6s both;
+  width: 48px;
+  height: 48px;
+}
+#loader .spinner {
+  animation: loader-appearance 0.6s both;
+}
+`
+    this.root = this.attachShadow({ mode: 'open' })
+    this.loader = document.createElement('div')
+    this.loader.id = 'loader'
+    this.loader.innerHTML = `
+<div class="spinner">
+  <svg
+    viewBox="0 0 100 100"
+    style="
+      animation: 2s linear 0s infinite normal none running loader-circular-spinner;
+      display: block;
+      width: 48px;
+      height: 48px;
+    "
+  >
+    <circle fill="transparent" cx="50" cy="50" r="42" stroke="rgba(0,0,0,0.1)" stroke-width="10px"></circle>
+    <circle
+      fill="transparent"
+      stroke="#5548D9"
+      cx="50"
+      cy="50"
+      r="42"
+      stroke-width="10px"
+      stroke-linecap="round"
+      style="animation: 1.5s linear 0s infinite normal none running loader-circular-track"
+    ></circle>
+  </svg>
+</div>`
+    this.shadowRoot.appendChild(this.stylesheet)
+    this.shadowRoot.appendChild(this.loader)
+  }
+}
 
 if (typeof window != 'undefined' && !window.customElements.get('feaas-stylesheet')) {
   window.customElements.define('feaas-stylesheet', HTMLFeaasStylesheet)
   window.customElements.define('feaas-component', HTMLFeaasComponent)
+  window.customElements.define('feaas-picker-lazy', HTMLFeaasPickerLazy)
+  window.customElements.define('feaas-loader', HTMLFeaasLoader)
 }

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-6b45b819.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;
@@ -62,6 +62,10 @@ declare global {
                 hostname?: string;
                 children?: any;
             };
+            'feaas-picker': {
+                library: string;
+                mode?: string;
+            };
         }
     }
 }
@@ -75,6 +79,7 @@ declare class HTMLFeaasComponent extends WebComponent {
     template: string;
     data: any;
     isFetching: boolean;
+    rendering: ReturnType<typeof requestAnimationFrame>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
@@ -95,9 +100,21 @@ declare class HTMLFeaasStylesheet extends WebComponent {
     render(): void;
     getProps(): {
         library: string;
-        version: string;
+        revision: string;
         hostname: string;
     };
 }
+interface PickerProps<T = HTMLElement> {
+    children?: any;
+    context?: T;
+    isOpen?: boolean;
+    mode?: 'library' | 'stylesheet';
+    src?: string;
+    onClose?: () => any;
+}
+interface HTMLFeaasPickerProps extends Omit<PickerProps<HTMLElement>, 'children'> {
+    getAccessTokenSilently: (options: any) => Promise<string>;
+    library: string;
+}
 
-export { CloudStylesheet as C, Datascopes as D, ExplicitTemplate as E, FEAASCustomizations as F, HTMLFeaasComponent as H, HTMLFeaasStylesheet as a, FEAASComponentProps as b, cleanCollectionBit as c, autoloadScripts as d, renderDOMElement as e, renderDOMContent as f, renderStylesheet as g, renderStylesheetPromise as h, renderComponent as i, renderComponentPromise as j, CloudTemplate as k, loadScript as l, getComponentURL as m, normalizeCollectionScope as n, observeDOMElement as o, getStylesheetURL as p, queryScopes as q, renderComponentElement as r, setDOMAttribute as s, fetchComponent as t, fetchStylesheet as u };
+export { CloudStylesheet as C, Datascopes as D, ExplicitTemplate as E, FEAASCustomizations as F, HTMLFeaasComponent as H, PickerProps as P, HTMLFeaasStylesheet as a, FEAASComponentProps as b, cleanCollectionBit as c, autoloadScripts as d, renderDOMElement as e, renderDOMContent as f, renderStylesheet as g, renderStylesheetPromise as h, renderComponent as i, renderComponentPromise as j, HTMLFeaasPickerProps as k, loadScript as l, CloudTemplate as m, normalizeCollectionScope as n, observeDOMElement as o, getComponentURL as p, queryScopes as q, renderComponentElement as r, setDOMAttribute as s, getStylesheetURL as t, fetchComponent as u, fetchStylesheet as v };