Merge pull request #130 from umbraco/feature/package-globals

Author: nielslyngsoe

package.json

@@ -94,7 +94,6 @@
     "postcss-custom-properties-fallback": "1.0.1",
     "postcss-jsx": "0.36.4",
     "postcss-load-config": "3.1.0",
-    "postcss-syntax": "0.36.2",
     "postcss-values-parser": "6.0.0",
     "prettier": "2.5.1",
     "rimraf": "3.0.2",

packages/rollup-package.config.js

@@ -27,8 +27,8 @@ const createEsModulesConfig = (entryPoints = []) => {
         external: [/^lit/, /^@umbraco-ui/],
         plugins: [
           importCss({ from: undefined }),
-          processLitCSSPlugin(),
           esbuild(),
+          processLitCSSPlugin(),
         ],
       };
     }),

packages/uui-action-bar/lib/index.ts

@@ -1,6 +1 @@
-import { UUIActionBarElement } from './uui-action-bar.element';
-import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-
-defineElement('uui-action-bar', UUIActionBarElement);
-
 export * from './uui-action-bar.element';

packages/uui-action-bar/lib/uui-action-bar.element.ts

@@ -1,10 +1,12 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUIButtonGroupElement } from '@umbraco-ui/uui-button-group/lib';
 import { css } from 'lit';
 
 /**
  *  @element uui-action-bar
  *  @description - Extends button group to hold buttons with icons that represent actions.
  */
+@defineElement('uui-action-bar')
 export class UUIActionBarElement extends UUIButtonGroupElement {
   static styles = [
     ...UUIButtonGroupElement.styles,
@@ -53,3 +55,9 @@ export class UUIActionBarElement extends UUIButtonGroupElement {
     `,
   ];
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-action-bar': UUIActionBarElement;
+  }
+}

packages/uui-action-bar/lib/uui-action-bar.test.ts

@@ -1,6 +1,6 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
+
 import { UUIActionBarElement } from './uui-action-bar.element';
-import '.';
 
 describe('UUIActionBarElement', () => {
   let element: UUIActionBarElement;
@@ -9,6 +9,10 @@ describe('UUIActionBarElement', () => {
     element = await fixture(html` <uui-action-bar></uui-action-bar> `);
   });
 
+  it('is defined', () => {
+    expect(element).to.be.instanceOf(UUIActionBarElement);
+  });
+
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });

packages/uui-avatar-group/lib/index.ts

@@ -1,6 +1 @@
-import { UUIAvatarGroupElement } from './uui-avatar-group.element';
-import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-
-defineElement('uui-avatar-group', UUIAvatarGroupElement);
-
 export * from './uui-avatar-group.element';

packages/uui-avatar-group/lib/uui-avatar-group.element.ts

@@ -1,4 +1,5 @@
 import { UUIAvatarElement } from '@umbraco-ui/uui-avatar/lib';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
 
@@ -7,6 +8,7 @@ import { property, queryAssignedElements, state } from 'lit/decorators.js';
  * @element uui-avatar-group
  * @slot for uui-avatar elements
  */
+@defineElement('uui-avatar-group')
 export class UUIAvatarGroupElement extends LitElement {
   static styles = [
     css`
@@ -88,3 +90,9 @@ export class UUIAvatarGroupElement extends LitElement {
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-avatar-group': UUIAvatarGroupElement;
+  }
+}

packages/uui-avatar/lib/index.ts

@@ -1,6 +1 @@
-import { UUIAvatarElement } from './uui-avatar.element';
-import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-
-defineElement('uui-avatar', UUIAvatarElement);
-
 export * from './uui-avatar.element';

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

@@ -1,11 +1,13 @@
 import { property, state } from 'lit/decorators.js';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { LitElement, html, css } from 'lit';
 
 /**
  *  Avatar for displaying users
  *  @element uui-avatar
  *  @slot For anything other than initials (no more than 2-3 characters)
  */
+@defineElement('uui-avatar')
 export class UUIAvatarElement extends LitElement {
   static styles = [
     css`
@@ -126,3 +128,9 @@ export class UUIAvatarElement extends LitElement {
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-avatar': UUIAvatarElement;
+  }
+}

packages/uui-badge/lib/index.ts

@@ -1,6 +1 @@
-import { UUIBadgeElement } from './uui-badge.element';
-import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-
-defineElement('uui-badge', UUIBadgeElement);
-
 export * from './uui-badge.element';