feat: add demandCustomElement for all elements that require other uui-elements to render correctly (#172)

Author: madsrasmussen

package-lock.json

@@ -30,7 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17"
+    "@umbraco-ui/uui-base": "0.0.17",
+    "@umbraco-ui/uui-avatar": "0.0.19"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",

packages/uui-avatar-group/package.json

@@ -12,6 +12,9 @@
   "references": [
     {
       "path": "../uui-base"
+    },
+    {
+      "path": "../uui-avatar"
     }
   ]
 }

packages/uui-avatar-group/tsconfig.json

@@ -31,8 +31,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17",
-    "@umbraco-ui/uui-icon-registry-essential": "0.0.3"
+    "@umbraco-ui/uui-base": "0.0.17"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",

packages/uui-button-group/package.json

@@ -12,9 +12,6 @@
   "references": [
     {
       "path": "../uui-base"
-    },
-    {
-      "path": "../uui-icon-registry-essential"
     }
   ]
 }

packages/uui-button-group/tsconfig.json

@@ -1,9 +1,8 @@
-import '@umbraco-ui/uui-icon/lib';
-
 import {
   UUIHorizontalShakeAnimationValue,
   UUIHorizontalShakeKeyframes,
 } from '@umbraco-ui/uui-base/lib/animations';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import {
@@ -609,19 +608,17 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
     let element = html``;
     switch (this.state) {
       case 'waiting':
-        if (!customElements.get('uui-loader-circle')) {
-          console.warn(
-            'To properly render the waiting state, the uui-loader-circle element has to be registered'
-          );
-        }
+        demandCustomElement(this, 'uui-loader-circle');
         element = html`<uui-loader-circle id="loader"></uui-loader-circle>`;
         break;
       case 'success':
+        demandCustomElement(this, 'uui-icon');
         element = html`<uui-icon
           name="check"
           .fallback=${iconCheck.strings[0]}></uui-icon>`;
         break;
       case 'failed':
+        demandCustomElement(this, 'uui-icon');
         element = html`<uui-icon
           name="wrong"
           .fallback=${iconWrong.strings[0]}></uui-icon>`;

packages/uui-button/lib/uui-button.element.ts

@@ -30,7 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17"
+    "@umbraco-ui/uui-base": "0.0.17",
+    "@umbraco-ui/uui-icon-registry-essential": "0.0.3"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",

packages/uui-button/package.json

@@ -12,6 +12,9 @@
   "references": [
     {
       "path": "../uui-base"
+    },
+    {
+      "path": "../uui-icon-registry-essential"
     }
   ]
 }

packages/uui-button/tsconfig.json

@@ -1,4 +1,5 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { UUICardElement } from '@umbraco-ui/uui-card/lib';
 import { css, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -108,6 +109,7 @@ export class UUICardContentNodeElement extends UUICardElement {
   }
 
   private _renderFallbackIcon() {
+    demandCustomElement(this, 'uui-icon');
     return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
   }
 

packages/uui-card-content-node/lib/uui-card-content-node.element.ts

@@ -1,4 +1,5 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { UUICardElement } from '@umbraco-ui/uui-card/lib';
 import { css, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -125,6 +126,13 @@ export class UUICardMediaElement extends UUICardElement {
   @state()
   protected hasPreview = false;
 
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    demandCustomElement(this, 'uui-symbol-folder');
+    demandCustomElement(this, 'uui-symbol-file');
+  }
+
   private queryPreviews(e: any): void {
     this.hasPreview =
       (e.path[0] as HTMLSlotElement).assignedElements({ flatten: true })