@sitecore-feaas/clientside 0.0.9 → 0.1.0

package/dist/node/{react.js → basic.js}

@@ -17,10 +17,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -42,108 +38,6 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// src/react.ts
-import React from "react";
-
-// src/fetch.ts
-function fetchAndRevalidate(url, options, validator, callback) {
-  return __async(this, null, function* () {
-    const date = new Date();
-    const initialResponse = yield fetch(url, options);
-    if (!initialResponse.ok)
-      throw new Error("Fetch failed");
-    const responseDate = new Date(initialResponse.headers.get("date"));
-    var response = initialResponse;
-    callback(initialResponse, "cached");
-    if (responseDate < date) {
-      const freshHeadResponse = yield fetch(url + "?" + Math.random(), __spreadProps(__spreadValues({}, options), {
-        method: "HEAD",
-        cache: "no-cache"
-      }));
-      if (freshHeadResponse.headers.get("last-modified") != initialResponse.headers.get("last-modified")) {
-        if (validator(freshHeadResponse) === false) {
-          throw new Error("Response is stale");
-        }
-        response = yield fetch(url, __spreadProps(__spreadValues({}, options), {
-          cache: "reload"
-        }));
-      }
-    }
-    if (validator(response) === false) {
-      throw new Error("Response is not valid");
-    }
-    if (initialResponse !== response) {
-      callback(response, "valid");
-    }
-    return response;
-  });
-}
-
-// src/cloud.ts
-function getComponentURL({
-  hostname = "https://feaascomponentsapidev.blob.core.windows.net",
-  library,
-  component,
-  version,
-  revision = "published"
-}) {
-  return `${hostname}/components/${library}/${component}/${version}/${revision}.html`;
-}
-function getStylesheetURL({
-  hostname = `https://feaascomponentsapidev.blob.core.windows.net`,
-  library,
-  revision = "published"
-}) {
-  return `${hostname}/styles/${library}/${revision}.css`;
-}
-function fetchComponent(props, callback) {
-  return __async(this, null, function* () {
-    return fetchAndRevalidate(
-      getComponentURL(props),
-      {},
-      (response) => {
-        return response.headers.get("x-ms-meta-versionDeletedAt") == null;
-      },
-      (response) => {
-        response.text().then(callback);
-      }
-    );
-  });
-}
-function fetchStylesheet(props, callback) {
-  return __async(this, null, function* () {
-    return fetchAndRevalidate(
-      getStylesheetURL(props),
-      {},
-      (response) => {
-        return response.headers.get("x-ms-meta-deletedAt") == null;
-      },
-      (response) => {
-        response.text().then(callback);
-      }
-    );
-  });
-}
-
-// src/dom.ts
-var dom_exports = {};
-__export(dom_exports, {
-  autoloadScripts: () => autoloadScripts,
-  cleanCollectionBit: () => cleanCollectionBit,
-  loadScript: () => loadScript,
-  normalizeCollectionScope: () => normalizeCollectionScope,
-  observeDOMElement: () => observeDOMElement,
-  queryScopes: () => queryScopes,
-  renderComponent: () => renderComponent,
-  renderComponentElement: () => renderComponentElement,
-  renderComponentPromise: () => renderComponentPromise,
-  renderDOMContent: () => renderDOMContent,
-  renderDOMElement: () => renderDOMElement,
-  renderStylesheet: () => renderStylesheet,
-  renderStylesheetPromise: () => renderStylesheetPromise,
-  setDOMAttribute: () => setDOMAttribute
-});
-
 // ../node_modules/jsonpath-plus/dist/index-browser-esm.js
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -843,6 +737,88 @@ JSONPath.prototype.vm = {
   }
 };
 
+// src/fetch.ts
+function fetchAndRevalidate(url, options, validator, callback) {
+  return __async(this, null, function* () {
+    const date = new Date();
+    const initialResponse = yield fetch(url, options);
+    if (!initialResponse.ok)
+      throw new Error("Fetch failed");
+    const responseDate = new Date(initialResponse.headers.get("date"));
+    var response = initialResponse;
+    callback(initialResponse, "cached");
+    if (responseDate < date) {
+      const freshHeadResponse = yield fetch(url + "?" + Math.random(), __spreadProps(__spreadValues({}, options), {
+        method: "HEAD",
+        cache: "no-cache"
+      }));
+      if (freshHeadResponse.headers.get("last-modified") != initialResponse.headers.get("last-modified")) {
+        if (validator(freshHeadResponse) === false) {
+          throw new Error("Response is stale");
+        }
+        response = yield fetch(url, __spreadProps(__spreadValues({}, options), {
+          cache: "reload"
+        }));
+      }
+    }
+    if (validator(response) === false) {
+      throw new Error("Response is not valid");
+    }
+    if (initialResponse !== response) {
+      callback(response, "valid");
+    }
+    return response;
+  });
+}
+
+// src/cloud.ts
+function getComponentURL({
+  cdn = "https://feaascomponentsapidev.blob.core.windows.net",
+  hostname,
+  library,
+  component,
+  version,
+  revision = "published"
+}) {
+  return `${cdn || hostname}/components/${library}/${component}/${version}/${revision}.html`;
+}
+function getStylesheetURL({
+  cdn = `https://feaascomponentsapidev.blob.core.windows.net`,
+  hostname,
+  library,
+  revision = "published"
+}) {
+  return `${cdn || hostname}/styles/${library}/${revision}.css`;
+}
+function fetchComponent(props, callback) {
+  return __async(this, null, function* () {
+    return fetchAndRevalidate(
+      getComponentURL(props),
+      {},
+      (response) => {
+        return response.headers.get("x-ms-meta-versionDeletedAt") == null;
+      },
+      (response) => {
+        response.text().then(callback);
+      }
+    );
+  });
+}
+function fetchStylesheet(props, callback) {
+  return __async(this, null, function* () {
+    return fetchAndRevalidate(
+      getStylesheetURL(props),
+      {},
+      (response) => {
+        return response.headers.get("x-ms-meta-deletedAt") == null;
+      },
+      (response) => {
+        response.text().then(callback);
+      }
+    );
+  });
+}
+
 // src/dom.ts
 function renderComponentElement(content, datasources) {
   const wrapper = document.createElement("div");
@@ -1122,393 +1098,410 @@ function renderComponentPromise(props, root) {
   });
 }
 
-// src/webcomponent.ts
-var webcomponent_exports = {};
-__export(webcomponent_exports, {
-  HTMLFeaasComponent: () => HTMLFeaasComponent,
-  HTMLFeaasStylesheet: () => HTMLFeaasStylesheet
-});
-var WebComponent = typeof HTMLElement == "undefined" ? class {
-} : HTMLElement;
-var HTMLFeaasComponent = class extends WebComponent {
+// src/components/FEAASBase.tsx
+var FEAASBase = class extends HTMLElement {
   constructor() {
     super(...arguments);
-    this.connected = false;
-    this.template = null;
-    this.data = void 0;
-    this.isFetching = false;
-  }
-  static get observedAttributes() {
-    return ["data", "library", "component", "version", "revision", "hostname", "template"];
+    this.connected = null;
+    this.refs = {};
+    this.descendants = [];
+    this.onLoad = (payload) => {
+      if (payload == null)
+        return;
+      this.payload = payload;
+      this.render();
+    };
   }
-  connectedCallback() {
-    this.connected = true;
-    this.render();
+  getProps(context) {
+    return {};
   }
-  disconnectedCallback() {
+  getRoot() {
+    return this;
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    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 {
-      cancelAnimationFrame(this.rendering);
-      this.rendering = requestAnimationFrame(() => {
-        this.render();
-      });
-    }
+    this.set();
   }
-  update() {
-    renderDOMElement(this, this.getProps().data);
-  }
-  setData(data) {
-    this.data = data;
-    if (this.children.length > 0) {
-      this.update();
-    } else {
-      this.render();
-    }
+  connectedCallback() {
+    console.log("FEAAS: Connected", this);
+    this.connected = new Event("feaasConnected", { bubbles: true, composed: true });
+    this.dispatchEvent(this.connected);
+    this.addEventListener("feaasConnected", this);
+    this.addEventListener("feaasDisconnected", this);
+    this.set();
   }
-  getOriginal() {
-    const scope = this.getAttribute("data-path-scope");
-    if (!scope)
-      return;
-    for (var current = this; current = current.previousElementSibling; ) {
-      if (current.getAttribute("data-path-scope") == scope) {
-        var last = current;
-      } else {
+  disconnectedCallback() {
+    console.log("FEAAS: Disconnected", this);
+    this.removeEventListener("feaasConnected", this);
+    this.removeEventListener("feaasDisconnected", this);
+    this.dispatchEvent(new Event("feaasDisconnected", { bubbles: true, composed: true }));
+    this.connected = null;
+  }
+  handleEvent(event) {
+    switch (event.type) {
+      case "feaasConnected":
+        this.adoptedCallback(event);
+        break;
+      case "feaasDisconnected":
+        this.orphanCallback(event);
         break;
-      }
-    }
-    return last;
-  }
-  getData() {
-    var _a;
-    if (this.data) {
-      return this.data;
-    }
-    if (this.getAttribute("data")) {
-      const dataValue = this.getAttribute("data");
-      return typeof dataValue == "string" ? JSON.parse(dataValue) : {};
     }
-    return ((_a = this.getOriginal()) == null ? void 0 : _a.getData()) || {};
-    return {};
   }
-  render() {
-    if (this.getOriginal()) {
+  orphanCallback(event) {
+    const target = event.composedPath()[0];
+    const index = this.descendants.indexOf(target);
+    if (index == -1)
       return;
+    console.log("FEAAS: Orphaning", this, target);
+    this.descendants.splice(index, -1);
+    this.refs[target.getComponentName()] = null;
+    if (target.refs.parent == this)
+      target.refs.parent = null;
+    if (target.refs.top == this) {
+      target.refs.top = target.refs.parent;
     }
-    const newProps = this.getProps();
-    if (this.template == null) {
-      if (!this.isFetching) {
-        if (newProps.component != null && newProps.version != null) {
-          this.isFetching = true;
-          fetchComponent(newProps, (template) => {
-            this.template = template;
-            this.isFetching = false;
-            renderDOMContent(this, this.template, newProps.data);
-          }).catch(() => {
-            console.error(
-              `FEAAS: Could not fetch component: ${newProps.component}/${newProps.version}/${newProps.revision}`
-            );
-          });
+  }
+  adoptedCallback(event) {
+    var _a, _b;
+    const target = event.composedPath()[0];
+    this.descendants.push(target);
+    console.log("FEAAS: Adopting", this, target);
+    this.refs[target.getComponentName()] = target;
+    target.refs.top = this;
+    (_a = target.refs).parent || (_a.parent = this);
+    if (target.renderReact) {
+      for (var p = target.refs.parent; p; p = p.refs.parent) {
+        if (p.renderReact) {
+          (_b = target.refs).parentReact || (_b.parentReact = p);
+          target.refs.topReact = p;
         }
       }
-    } else {
-      renderDOMContent(this, this.template, newProps.data);
     }
   }
-  getProps() {
-    return {
-      data: this.getData(),
-      library: this.getAttribute("library") || void 0,
-      component: this.getAttribute("component") || void 0,
-      version: this.getAttribute("version") || void 0,
-      revision: this.getAttribute("revision") || void 0,
-      hostname: patchHostname(this.getAttribute("hostname") || void 0)
-    };
-  }
-};
-var HTMLFeaasStylesheet = class extends WebComponent {
-  constructor() {
-    super(...arguments);
-    this.connected = false;
-  }
-  static get observedAttributes() {
-    return ["library", "revision", "hostname"];
+  getComponentName() {
+    return this.tagName.replace("FEAAS-", "").toLowerCase();
   }
-  connectedCallback() {
-    this.connected = true;
-    this.render();
+  isReadyToLoad() {
+    return this.payload === void 0 && this.getAttribute("hidden") == null;
   }
-  attributeChangedCallback() {
-    if (this.connected)
-      this.render();
-  }
-  render() {
-    const props = this.getProps();
-    fetchStylesheet(props, (cssText) => {
-      this.innerHTML = "<style>" + cssText + "</style>";
-    }).catch((e) => {
-      console.error(`FEAAS: Could not fetch stylesheet for library ${props.library}`);
+  reify() {
+    return __async(this, null, function* () {
+      if (this.payload !== void 0) {
+        this.render();
+      } else if (this.isReadyToLoad()) {
+        this.payload = null;
+        this.load().then(this.onLoad);
+      }
     });
   }
-  getProps() {
-    return {
-      library: this.getAttribute("library") || void 0,
-      revision: this.getAttribute("revision") || void 0,
-      hostname: patchHostname(this.getAttribute("hostname") || void 0)
-    };
+  load() {
+    return Promise.resolve(null);
   }
-};
-function patchHostname(url) {
-  if (typeof url == "string" && (location.hostname.includes("pages-staging") || location.hostname.includes("staging-staging"))) {
-    return url.replace("components.sitecorecloud.io", "components-staging.sitecore-staging.cloud").replace("feaascompontsapiprod", "feaascomponentsstaging");
-  } else {
-    return url;
+  render(nested = false) {
+    var _a, _b, _c;
+    console.log("FEAAS: React", this.tagName, this.payload);
+    if (this.payload == null)
+      return;
+    const { React, ReactDOM } = this.payload || {};
+    if (!React)
+      throw new Error(`${this.tagName}: React is not present in payload`);
+    if (!ReactDOM)
+      throw new Error(`${this.tagName}: ReactDOM is not present in payload`);
+    if (!this.refs.topReact && !this.forceUpdateReact) {
+      ReactDOM.render(React.createElement(this.getReactWrapper()), this.getReactRoot());
+    } else if (this.forceUpdateReact) {
+      (_a = this.forceUpdateReact) == null ? void 0 : _a.call(this);
+    } else {
+      (_c = (_b = this.refs.topReact).forceUpdateReact) == null ? void 0 : _c.call(_b);
+    }
   }
-}
-var HTMLFeaasPickerLazy = class extends WebComponent {
-  constructor() {
-    super(...arguments);
-    this.src = "https://components.sitecorecloud.io/assets/picker.js";
-    this.onClose = () => {
-      this.set({
-        mode: null
+  invokeReactRendering() {
+    const { React, ReactDOM } = this.payload || {};
+    const children = this.descendants.filter((r) => {
+      return r.refs.parentReact == this && r.payload;
+    }).map((child, index) => {
+      return React.createElement(this.getReactWrapper(child), {
+        key: this.tagName + "-" + index,
+        slot: child.getAttribute("slot")
       });
-    };
-    this.onScriptLoaded = () => {
-      this.element = document.createElement("feaas-picker");
-      this.element.style.cssText = "border: 0; width: 100%; height: 100%; display: block";
-      this.appendChild(this.element);
-      this.set(this.getProps());
-    };
-  }
-  static get observedAttributes() {
-    return ["library", "mode", "hidden", "src"];
+    });
+    return this.renderReact(__spreadProps(__spreadValues({}, this.props), { children }), this.payload);
+  }
+  getReactWrapper(target = this, displayName = target.tagName) {
+    const Wrapper = target.reactWrapper || (target.reactWrapper = (props) => {
+      if (target.renderReact) {
+        const { React, ReactDOM } = target.payload || {};
+        const [value, forceUpdateReact] = React.useReducer((r) => r + 1, 0);
+        target.forceUpdateReact = forceUpdateReact;
+        return ReactDOM.createPortal(<>{target.invokeReactRendering()}</>, target.getReactRoot());
+      } else {
+        return target.render();
+      }
+    });
+    Object.assign(Wrapper, {
+      displayName
+    });
+    return Wrapper;
+  }
+  getUID() {
+    return this.uid || (this.uid = String(Math.random()));
+  }
+  getReactRoot() {
+    return this.getRoot();
+  }
+  set(overrides) {
+    this.overrides = __spreadValues(__spreadValues({}, this.overrides), overrides);
+    this.props = __spreadValues(__spreadValues({}, this.getProps()), this.overrides);
+    for (var property in this.props) {
+      const value = this.props[property];
+      if (this.props[property] == null) {
+        this.removeAttribute(property);
+      } else if (typeof value == "string" || typeof value == "number") {
+        if (this.getAttribute(property) != String(value))
+          this.setAttribute(property, String(value));
+      }
+    }
+    this.scheduleRender();
   }
-  connectedCallback() {
-    this.loader = document.createElement("feaas-loader");
-    this.loader.style.cssText = "position: absolute; top: 0; left: 0; right: 0;bottom: 0; ";
-    this.appendChild(this.loader);
+  scheduleRender() {
+    cancelAnimationFrame(this.nextRender);
+    this.nextRender = requestAnimationFrame(() => {
+      this.reify();
+    });
   }
-  load() {
-    if (!this.script) {
-      this.script = document.createElement("script");
-      this.script.type = "module";
-      this.script.onload = this.onScriptLoaded;
-      this.script.src = patchHostname(this.src);
-      this.script.crossOrigin = "anonymous";
-      this.appendChild(this.script);
+  formatURL(src, hostname) {
+    if (typeof src == "string" && src.match(/\/[^\/]/)) {
+      return hostname + src;
+    } else {
+      return src;
     }
   }
-  getProps() {
-    return {
-      mode: this.getAttribute("mode"),
-      context: this.context,
-      library: this.getAttribute("library"),
-      src: this.getAttribute("src")
-    };
+  getContextAttribute(name, element = this) {
+    var _a, _b;
+    return (_b = (_a = element.closest(`[${name}]`)) == null ? void 0 : _a.getAttribute(name)) != null ? _b : this.getAttribute(name);
+  }
+  static register(tagName) {
+    if (!window.customElements.get(tagName)) {
+      window.customElements.define(tagName, this);
+    }
   }
+};
+
+// src/components/FEAASLoader.ts
+function FEAASLoaderProps(element = this) {
+  return {
+    hidden: (element == null ? void 0 : element.getAttribute("hidden")) != null
+  };
+}
+var FEAASLoader = class extends FEAASBase {
   attributeChangedCallback(name, oldValue, newValue) {
-    this.set(this.getProps());
-  }
-  set(options) {
-    Object.assign(this, options);
-    const keys = Object.keys(this.getProps());
-    for (var key of keys) {
-      const value = this[key];
-      if (value == null) {
-        this.removeAttribute(key);
-      } else if (this.getAttribute(key) != String(value)) {
-        this.setAttribute(key, String(value));
+    if (name == "hidden") {
+      this.style.setProperty("display", "block", "important");
+      this.style.setProperty("transition", "opacity 0.3s", "important");
+      if (newValue) {
+        this.style.setProperty("opacity", "0", "important");
+        this.style.pointerEvents = "none";
+      } else {
+        this.style.setProperty("opacity", "1", "important");
+        this.style.pointerEvents = "all";
       }
     }
-    if (this.mode) {
-      this.removeAttribute("hidden");
-    } else if (this.getAttribute("hidden") == null) {
-      this.setAttribute("hidden", "hidden");
+  }
+  connectedCallback() {
+    this.attributeChangedCallback("hidden", this.getAttribute("hidden"), this.getAttribute("hidden"));
+    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;
+  }
+  @keyframes loader-circular-track {
+    0% {
+      stroke-dasharray: 1, 400;
+      stroke-dashoffset: 0;
     }
-    if (this.mode && !this.hidden) {
-      this.load();
+    50% {
+      stroke-dasharray: 400, 400;
+      stroke-dashoffset: -100;
     }
-    if (this.element && this.element.set) {
-      this.element.onClose = this.onClose;
-      this.element.getToken = this.getToken;
-      this.element.set(options);
+    100% {
+      stroke-dasharray: 400, 400;
+      stroke-dashoffset: -260;
     }
   }
-};
-var HTMLFeaasLoader = class extends WebComponent {
-  static get observedAttributes() {
-    return ["hidden"];
+  
+  @keyframes loader-circular-spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+  
+    100% {
+      transform: rotate(360deg);
+    }
   }
-  connectedCallback() {
-    this.style.opacity = "1";
-    this.style.transition = "opacity 0.1s 0.2s";
-    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;
+  #loader .spinner {
+    width: 48px;
+    height: 48px;
   }
-}
-@keyframes loader-appearance {
-  0% {
-    opacity: 0;
+  `;
+    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.getRoot().appendChild(this.stylesheet);
+    this.getRoot().appendChild(this.loader);
   }
+};
+FEAASLoader.observedAttributes = ["hidden"];
+FEAASLoader.register("feaas-loader");
+
+// src/components/FEAASStylesheet.ts
+function FEAASStylesheetProps(element = this) {
+  var _a;
+  return {
+    library: element == null ? void 0 : element.getContextAttribute("library"),
+    revision: (_a = element == null ? void 0 : element.getAttribute("revision")) != null ? _a : "published",
+    cdn: element == null ? void 0 : element.getContextAttribute("cdn")
+  };
 }
-@keyframes loader-circular-track {
-  0% {
-    stroke-dasharray: 1, 400;
-    stroke-dashoffset: 0;
+var FEAASStylesheet = class extends FEAASBase {
+  getProps() {
+    return FEAASStylesheetProps(this);
   }
-  50% {
-    stroke-dasharray: 400, 400;
-    stroke-dashoffset: -100;
+  isReadyToLoad() {
+    return this.props.library != null && this.props.revision != null && this.props.cdn != null;
   }
-  100% {
-    stroke-dasharray: 400, 400;
-    stroke-dashoffset: -260;
+  load() {
+    return __async(this, null, function* () {
+      fetchStylesheet(this.props, this.onLoad);
+    });
   }
-}
-
-@keyframes loader-circular-spinner {
-  0% {
-    transform: rotate(0deg);
+  render() {
+    if (!this.stylesheet) {
+      this.stylesheet = document.createElement("style");
+      this.appendChild(this.stylesheet);
+    }
+    this.stylesheet.textContent = this.payload;
   }
+};
+FEAASStylesheet.register("feaas-stylesheet");
 
-  100% {
-    transform: rotate(360deg);
+// src/components/FEAASComponent.ts
+function FEAASComponentsProps(element = this) {
+  let data;
+  const dataValue = element.getAttribute("data");
+  if (dataValue != null) {
+    try {
+      data = typeof dataValue == "string" ? JSON.parse(dataValue) : {};
+    } catch (e) {
+    }
   }
+  return {
+    data: data != null ? data : {},
+    library: element.getAttribute("library"),
+    component: element.getAttribute("component"),
+    version: element.getAttribute("version"),
+    revision: element.getAttribute("revision"),
+    hostname: element.getAttribute("hostname"),
+    cdn: element.getContextAttribute("cdn"),
+    template: element.getAttribute("template")
+  };
 }
-#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);
+var FEAASComponent = class extends FEAASBase {
+  setData(data) {
+    this.set({ data });
   }
-};
-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);
-  if (!window.customElements.get("feaas-loader"))
-    window.customElements.define("feaas-loader", HTMLFeaasLoader);
-}
-
-// src/react.ts
-function Component(props) {
-  const [template, setTemplate] = React.useState("template" in props ? props.template : null);
-  const data = props.data;
-  const ref = React.useRef(null);
-  React.useEffect(
-    () => {
-      if (template == null && !("template" in props)) {
-        fetchComponent(props, setTemplate).catch(() => {
-          console.error(
-            `FEAAS: Could not fetch component: ${props.library}/${props.component}/${props.version}/${props.revision}`
-          );
-        });
+  getProps() {
+    return FEAASComponentsProps(this);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.payload = void 0;
+    this.needsRefresh = true;
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
+  getOriginal() {
+    const scope = this.getAttribute("data-path-scope");
+    if (!scope)
+      return;
+    for (var current = this; current = current.previousElementSibling; ) {
+      if (current.getAttribute("data-path-scope") == scope) {
+        var last = current;
+      } else {
+        break;
       }
-    },
-    "template" in props ? [props.template, null, null, null] : [props.library, props.component, props.version, props.revision, props.hostname]
-  );
-  React.useEffect(() => {
-    if (ref.current && template) {
-      ref.current.innerHTML = template;
-    }
-  }, [ref, template]);
-  React.useEffect(() => {
-    if (template && ref.current) {
-      renderDOMElement(ref.current, data || {}, props);
     }
-  }, [ref, template, data]);
-  return React.createElement("div", { ref, className: "-feaas" });
-}
-function Stylesheet(props) {
-  const ref = React.useRef(null);
-  const [css, setCss] = React.useState("");
-  React.useEffect(() => {
-    fetchStylesheet(props, setCss).catch((e) => {
-      console.error(`FEAAS: Could not fetch stylesheet for library ${props.library}`);
+    return last;
+  }
+  isReadyToLoad() {
+    return super.isReadyToLoad() && this.props.library != null && this.props.component != null && this.props.version != null;
+  }
+  load() {
+    return __async(this, null, function* () {
+      if (this.getOriginal()) {
+        return;
+      }
+      try {
+        fetchComponent(this.props, this.onLoad);
+      } catch (e) {
+        console.error(
+          `FEAAS: Could not fetch component: ${this.props.component}/${this.props.version}/${this.props.revision}`
+        );
+      }
     });
-  }, [props.hostname, props.library]);
-  return React.createElement(
-    "style",
-    { ref, rel: "stylesheet", className: "-stylesheet", "data-library-id": props.library },
-    [css]
-  );
-}
-var react_default = __spreadProps(__spreadValues(__spreadValues({}, dom_exports), webcomponent_exports), {
-  Stylesheet,
-  Component
-});
+  }
+  render() {
+    if (Array.from(this.children).filter((c) => c.tagName != "BR").length > 0 && !this.needsRefresh) {
+      renderDOMElement(this, this.props.data);
+    } else {
+      this.needsRefresh = true;
+      if (this.getOriginal()) {
+        return;
+      }
+      renderDOMContent(this, this.payload, this.props.data);
+    }
+  }
+};
+FEAASComponent.observedAttributes = ["library", "component", "version", "revision", "hostname", "cdn", "template", "data"];
+FEAASComponent.register("feaas-component");
 export {
-  Component,
-  HTMLFeaasComponent,
-  HTMLFeaasStylesheet,
-  Stylesheet,
+  FEAASComponent,
+  FEAASComponentsProps,
+  FEAASLoader,
+  FEAASLoaderProps,
+  FEAASStylesheet,
+  FEAASStylesheetProps,
   autoloadScripts,
   cleanCollectionBit,
-  react_default as default,
-  fetchComponent,
-  fetchStylesheet,
-  getComponentURL,
-  getStylesheetURL,
+  fetchAndRevalidate,
   loadScript,
   normalizeCollectionScope,
   observeDOMElement,