bc9d85b

changelog.md

@@ -1,5 +1,11 @@
 # Changelog for Weavy
 
+## v17.0.1 
+
+<time>2023-05-16</time>
+
+* Fixed some issues for HTML creation of apps in uikit-js via *custom elements*. 
+
 ## v17.0.0 
 
 <time>2023-05-10</time>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/dropin-js",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "author": "Weavy",
   "description": "Javascript library for the Weavy drop-in UI",
   "homepage": "https://github.com/weavy/weavy-dropin-js",

src/components/app.js

@@ -320,16 +320,17 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
     // Set id
 
     this.configure();
+    console.log("constructor")
 
     try {
-      this.root = new WeavyRoot(this, this);
+      this.root = new WeavyRoot(this);
       this.root.className = this.className;
     } catch (e) {
       console.warn("could not create app root in container:", this.#appId, e);
     }
 
     try {
-      this.overlayRoot = new WeavyRoot(document.documentElement, this);
+      this.overlayRoot = new WeavyRoot(this);
       this.overlayRoot.className = this.className;
     } catch (e) {
       console.warn(
@@ -339,6 +340,8 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
       );
     }
 
+
+
     Weavy.whenReady().then(() => {
       this.options = assign(
         assign(Weavy.defaults, WeavyApp.defaults, true),
@@ -353,20 +356,26 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
         this.openBrowserState(state);
       });
 
-      // CONFIGURE
-      this.fetchOrCreate();
-      this.build();
-
-      if (!this.isLoaded && this.autoLoad !== false) {
-        this.load(null, true);
-      }
     });
 
     // CONSTRUCTOR END
   }
 
   connectedCallback() {
-    this.#styles.updateStyles();
+    this.append(this.root.root);
+    document.documentElement.append(this.overlayRoot.root);
+
+    // CONFIGURE
+    Weavy.whenReady().then(() => {
+      this.#styles.updateStyles();
+
+      this.fetchOrCreate();
+      this.build();
+
+      if (!this.isLoaded && this.autoLoad !== false) {
+        this.load(null, true);
+      }
+    })
   }
 
   /**
@@ -447,27 +456,21 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
    * @resolves {WeavyApp#whenInitialized}
    */
   async fetchOrCreate() {
-    if (this.options && typeof this.options === "object") {
-      var initAppUrl = new URL(appUrl, this.environment.url);
-
-      assign;
-
-      try {
-        let data = await this.environment.fetch(
-          initAppUrl,
-          { uid: this.uid, type: this.type },
-          "POST"
-        );
-        this.data = data;
-      } catch (error) {
-        console.error("WeavyApp.fetchOrCreate()", error.message);
-        throw new Error(error);
-      }
+    var initAppUrl = new URL(appUrl, this.environment.url);
 
-      await this.configure();
-    } else {
-      throw new Error("WeavyApp.fetchOrCreate() requires options");
+    try {
+      let data = await this.environment.fetch(
+        initAppUrl,
+        { uid: this.uid, type: this.type },
+        "POST"
+      );
+      this.data = data;
+    } catch (error) {
+      console.error("WeavyApp.fetchOrCreate()", error.message);
+      throw new Error(error);
     }
+
+    await this.configure();
   }
 
   /**

src/components/dom-root.js

@@ -1,7 +1,6 @@
 import domRootCss from "../scss/_dom-root.scss";
 import customElementsCss from "../scss/_custom-elements.scss";
 
-import { asElement } from '../utils/dom';
 import WeavyConsole from '../utils/console';
 import WeavyEvents from '../utils/events';
 import { createStyleSheet, applyStyleSheet } from "./styles";
@@ -50,8 +49,6 @@ export default class WeavyRoot extends WeavyEvents {
    */
   static supportsShadowDOM = !!HTMLElement.prototype.attachShadow;
 
-  #environment;
-
   /**
    * The common stylesheet for each root.
    * @private
@@ -67,12 +64,6 @@ export default class WeavyRoot extends WeavyEvents {
    */
   static globalStyleSheet;
 
-  /**
-   * The parent DOM node where the root is attached.
-   * @type {Element} 
-   */
-  parent;
-
   /**
    * The the <weavy-root/> that acts as root. May contain a ShadowDOM if supported.
    * @type {Element}
@@ -125,15 +116,9 @@ export default class WeavyRoot extends WeavyEvents {
    * @param {string} id - The id of the root.
    * @param {*} [eventParent] - Optional parent to bubble events to.
    */
-  constructor(parent, eventParent) {
+  constructor(eventParent) {
     super()
 
-    this.parent = asElement(parent);
-
-    if (!this.parent) {
-      throw new Error("No parent container defined");
-    }
-
     // Events
     if (eventParent) {
       this.eventParent = eventParent;
@@ -148,16 +133,11 @@ export default class WeavyRoot extends WeavyEvents {
 
     this.triggerEvent("before:root-create", this);
 
-    this.parent.appendChild(this.root);
-
-    if (WeavyRoot.supportsShadowDOM) {
-      if (WeavyRoot.defaults.shadowMode === "open") {
-        console.warn(this.id, "Using ShadowDOM in open mode", this.id);
-      }
-      this.dom = this.root.attachShadow({ mode: WeavyRoot.defaults.shadowMode || "closed" });
-    } else {
-      this.dom = this.root;
+    if (WeavyRoot.defaults.shadowMode === "open") {
+      console.warn(this.id, "Using ShadowDOM in open mode", this.id);
     }
+    this.dom = this.root.attachShadow({ mode: WeavyRoot.defaults.shadowMode || "closed" });
+
     this.dom.appendChild(this.container);
 
     this.updateClassName();
@@ -182,7 +162,6 @@ export default class WeavyRoot extends WeavyEvents {
     }
   }
 
-
   remove() {
     this.triggerEvent("before:root-remove", this);
 

src/components/environment.js

@@ -3,6 +3,7 @@ import {
   processJSONResponse,
   defaultFetchSettings,
 } from "../utils/data";
+import { ready } from "../utils/dom";
 import { assign } from "../utils/objects";
 import WeavyAuthenticationsManager from "./authentication";
 import WeavyUrlClassManager from "../utils/url-class-manager";
@@ -100,9 +101,11 @@ class WeavyEnvironment extends WeavyEvents {
     this.#authentication = WeavyAuthenticationsManager.get(url);
 
     this.authentication.whenAuthenticated().then(() => {
-      doFrameStatusCheck(this).then(() => {
-        this.#whenStatusChecked.resolve();
-      });
+      ready(() => {
+        doFrameStatusCheck(this).then(() => {
+          this.#whenStatusChecked.resolve();
+        });
+      })
     });
 
     // HISTORY

src/components/status.js

@@ -38,10 +38,10 @@ export default function frameStatusCheck(environment) {
     statusFrame.id = environment.getId("status-check");
     statusFrame.setAttribute("name", environment.getId("status-check"));
 
-    dialogRoot ??= new WeavyRoot(
-      document.documentElement,
-      null
-    );
+    if(!dialogRoot) {
+      dialogRoot = new WeavyRoot();
+      document.documentElement.append(dialogRoot.root)
+    } 
 
     dialog ??= new WeavyDialog(dialogRoot)
 

src/components/styles.js

@@ -286,7 +286,7 @@ export default class WeavyStyles extends WeavyEvents {
 
   getAllCSS() {
     var rootFont = this.#externalFont ? `:root{--wy-font-family:${this.#externalFont};}` : '';
-    var rootVars = this.#externalVars ? `:root{${this.#externalVars}}` : '';
+    var rootVars = this.#externalVars ? `:root{ ${this.#externalVars} }` : '';
     var rootColors = '';
 
     if (this.#externalColor) {

src/weavy.js

@@ -147,7 +147,7 @@ class Weavy extends HTMLElement {
 
   get fetch() {
     if (!this.#environment) {
-      throw new Error("No URL is defined for the environment. Please point Weavy.url to your environment.")
+      throw new Error("fetch: No URL is defined for the environment. Please point Weavy.url to your environment.")
     }
     return this.environment?.fetch;
   }
@@ -180,12 +180,15 @@ class Weavy extends HTMLElement {
 
   constructor(){
     super()
+  }
 
+  connectedCallback() {
     this.getAttributeNames().forEach((attr) => {
-        this.attributeChangedCallback(attr, null, this.getAttribute(attr))
+      this.attributeChangedCallback(attr, null, this.getAttribute(attr))
     })
   }
 }
+
 customElements.define("weavy-environment", Weavy);
 
 const StaticWeavy = new Weavy();