@justeattakeaway/pie-webc-core 0.18.0 → 0.19.0

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 vite v4.5.2 building for production...
 transforming...
-✓ 13 modules transformed.
+✓ 14 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js  2.41 kB │ gzip: 1.10 kB
-✓ built in 229ms
+dist/index.js  2.66 kB │ gzip: 1.20 kB
+✓ built in 198ms

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.19.0
+
+### Minor Changes
+
+- [Added] - dispatchCustomEvent helper function. ([#1272](https://github.com/justeattakeaway/pie/pull/1272)) by [@dandel10n](https://github.com/dandel10n)
+
 ## 0.18.0
 
 ### Minor Changes

package/dist/index.js

@@ -1,45 +1,54 @@
-import { isServer as l } from "lit";
-const a = (e, t, n) => function(o, r) {
-  const s = `#${r}`;
-  Object.defineProperty(o, r, {
+import { isServer as c } from "lit";
+const a = (t, e, r) => function(s, n) {
+  const o = `#${n}`;
+  Object.defineProperty(s, n, {
     get() {
-      return this[s];
+      return this[o];
     },
-    set(c) {
-      t.includes(c) ? this[s] = c : (console.error(
-        `<${e}> Invalid value "${c}" provided for property "${r}".`,
-        `Must be one of: ${t.join(" | ")}.`,
-        `Falling back to default value: "${n}"`
-      ), this[s] = n);
+    set(u) {
+      e.includes(u) ? this[o] = u : (console.error(
+        `<${t}> Invalid value "${u}" provided for property "${n}".`,
+        `Must be one of: ${e.join(" | ")}.`,
+        `Falling back to default value: "${r}"`
+      ), this[o] = r);
     },
     configurable: !0
   });
-}, d = (e) => function(n, i) {
-  const o = `#${i}`;
-  Object.defineProperty(n, i, {
+}, d = (t) => function(r, i) {
+  const s = `#${i}`;
+  Object.defineProperty(r, i, {
     get() {
-      return this[o];
+      return this[s];
     },
-    set(r) {
-      (r == null || typeof r == "string" && r.trim() === "") && console.error(`<${e}> Missing required attribute "${i}"`), this[o] = r;
+    set(n) {
+      (n == null || typeof n == "string" && n.trim() === "") && console.error(`<${t}> Missing required attribute "${i}"`), this[s] = n;
     },
     configurable: !0
   });
 };
-function f(e, t) {
-  customElements.get(e) ? console.warn(`PIE Web Component: "${e}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(e, t);
+function f(t, e) {
+  customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, e);
 }
-function m(e) {
-  return new CustomEvent(e.type, {
+function m(t) {
+  return new CustomEvent(t.type, {
     detail: {
-      sourceEvent: e
+      sourceEvent: t
     },
-    bubbles: e.bubbles,
-    cancelable: e.cancelable
+    bubbles: t.bubbles,
+    cancelable: t.cancelable
+  });
+}
+function b(t, e, r) {
+  e.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
+  const i = new CustomEvent(e, {
+    bubbles: !0,
+    composed: !0,
+    detail: r
   });
+  t.dispatchEvent(i);
 }
-const b = (e) => {
-  class t extends e {
+const h = (t) => {
+  class e extends t {
     /**
      * A getter to determine whether the text direction is right-to-left (RTL).
      * If the `dir` property is present on the component, it will be used to determine the text direction.
@@ -50,12 +59,12 @@ const b = (e) => {
      * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
      */
     get isRTL() {
-      return this.dir ? this.dir === "rtl" : !l && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+      return this.dir ? this.dir === "rtl" : !c && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
     }
   }
-  return t;
-}, p = (e) => {
-  class t extends e {
+  return e;
+}, p = (t) => {
+  class e extends t {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(...i) {
       super(...i), this._internals = this.attachInternals();
@@ -64,12 +73,13 @@ const b = (e) => {
       return this._internals.form;
     }
   }
-  return t.formAssociated = !0, t;
+  return e.formAssociated = !0, e;
 };
 export {
   p as FormControlMixin,
-  b as RtlMixin,
+  h as RtlMixin,
   f as defineCustomElement,
+  b as dispatchCustomEvent,
   d as requiredProperty,
   a as validPropertyValues,
   m as wrapNativeEvent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",

package/src/functions/dispatchCustomEvent.ts

@@ -0,0 +1,22 @@
+/**
+ * Dispatch a custom event.
+ *
+ * To be used whenever we have custom events we want to
+ * bubble up through the component.
+ * Bubbles and composed event props are set to true.
+ * @param {Element} element The element to dispatch the event from.
+ * @param {string} eventType
+ * @param {any} detail
+ */
+export function dispatchCustomEvent (element: Element, eventType: string, detail?: CustomEventInit['detail']) : void {
+    if (!eventType.startsWith('pie-')) {
+        console.warn('A custom event name should start with `pie-`');
+    }
+    const event = new CustomEvent(eventType, {
+        bubbles: true,
+        composed: true,
+        detail,
+    });
+
+    element.dispatchEvent(event);
+}

package/src/functions/index.ts

@@ -1,2 +1,3 @@
 export * from './defineCustomElement';
 export * from './wrapNativeEvent';
+export * from './dispatchCustomEvent';

package/src/test/functions/dispatchCustomElement/MockComponent.ts

@@ -0,0 +1,28 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { defineCustomElement } from '../../../functions/defineCustomElement.js';
+import { dispatchCustomEvent } from '../../../functions/dispatchCustomEvent.js';
+
+const componentSelector = 'dispatch-custom-event-mock';
+
+export class MockComponent extends LitElement {
+    @property({ type: String })
+    public eventName = 'pie-mock-event';
+
+    render () {
+        return html`
+            <button
+                @click="${() => dispatchCustomEvent(this, this.eventName)}"
+                data-test-id="dispatch-custom-event-mock">
+                Component with the event to dispatch
+            </button>`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: MockComponent;
+    }
+}
+
+defineCustomElement(componentSelector, MockComponent);

package/src/test/functions/dispatchCustomElement/dispatchCustomEvent.browser.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@sand4rt/experimental-ct-web';
+import { MockComponent } from './MockComponent.ts';
+
+test.describe('dispatchCustomEvent function', () => {
+    test('should dispatch an event when clicked', async ({ mount, page }) => {
+        // Arrange
+        const events : Array<Event> = [];
+
+        await mount(MockComponent, {
+            on: {
+                'pie-mock-event': (event: Event) => events.push(event),
+            },
+        });
+
+        // Act
+        await page.locator('[data-test-id="dispatch-custom-event-mock"]').click();
+
+        // Assert
+        expect(events).toHaveLength(1);
+    });
+
+    test('should call console.warn when event name do not start with "pie-"', async ({ mount, page }) => {
+        // Arrange
+        let result = '';
+        const expected = 'A custom event name should start with `pie-`';
+
+        await mount(MockComponent, {
+            props: {
+                eventName: 'mock-event',
+            },
+        });
+
+        page.on('console', (msg) => {
+            if (msg.type() === 'warning') {
+                result = msg.text();
+            }
+        });
+
+        // Act
+        await page.locator('[data-test-id="dispatch-custom-event-mock"]').click();
+
+        // Assert
+        expect(result).toMatch(expected);
+    });
+});

package/vite.config.js

@@ -18,7 +18,7 @@ export default defineConfig({
         globals: true,
         exclude: [
             '**/test/{accessibility,component,system,visual}/*.spec.{js,ts}',
-            '**/test/mixins/**/*.browser.spec.{js,ts}',
+            '**/test/**/*.browser.spec.{js,ts}',
             '**/node_modules/**/*'
         ],
     },