@justeattakeaway/pie-webc-core 0.17.1 → 0.19.0

package/.turbo/turbo-build.log

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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+
+- [Added] - PIEInputElement interface ([#1257](https://github.com/justeattakeaway/pie/pull/1257)) by [@fernandofranca](https://github.com/fernandofranca)
+
 ## 0.17.1
 
 ### Patch Changes

package/dist/index.js

@@ -1,6 +1,54 @@
-import { isServer as l } from "lit";
-const a = (e) => {
-  class t extends e {
+import { isServer as c } from "lit";
+const a = (t, e, r) => function(s, n) {
+  const o = `#${n}`;
+  Object.defineProperty(s, n, {
+    get() {
+      return this[o];
+    },
+    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 = (t) => function(r, i) {
+  const s = `#${i}`;
+  Object.defineProperty(r, i, {
+    get() {
+      return this[s];
+    },
+    set(n) {
+      (n == null || typeof n == "string" && n.trim() === "") && console.error(`<${t}> Missing required attribute "${i}"`), this[s] = n;
+    },
+    configurable: !0
+  });
+};
+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(t) {
+  return new CustomEvent(t.type, {
+    detail: {
+      sourceEvent: t
+    },
+    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 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.
@@ -11,12 +59,12 @@ const a = (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;
-}, d = (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();
@@ -25,51 +73,14 @@ const a = (e) => {
       return this._internals.form;
     }
   }
-  return t.formAssociated = !0, t;
-}, f = (e, t, n) => function(o, r) {
-  const s = `#${r}`;
-  Object.defineProperty(o, r, {
-    get() {
-      return this[s];
-    },
-    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);
-    },
-    configurable: !0
-  });
-}, m = (e) => function(n, i) {
-  const o = `#${i}`;
-  Object.defineProperty(n, i, {
-    get() {
-      return this[o];
-    },
-    set(r) {
-      (r == null || typeof r == "string" && r.trim() === "") && console.error(`<${e}> Missing required attribute "${i}"`), this[o] = r;
-    },
-    configurable: !0
-  });
+  return e.formAssociated = !0, e;
 };
-function b(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 p(e) {
-  return new CustomEvent(e.type, {
-    detail: {
-      sourceEvent: e
-    },
-    bubbles: e.bubbles,
-    cancelable: e.cancelable
-  });
-}
 export {
-  d as FormControlMixin,
-  a as RtlMixin,
-  b as defineCustomElement,
-  m as requiredProperty,
-  f as validPropertyValues,
-  p as wrapNativeEvent
+  p as FormControlMixin,
+  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.17.1",
+  "version": "0.19.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",
@@ -10,7 +10,7 @@
     "build": "run -T vite build",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
-    "test": "run -T vitest run",
+    "test": "run -T vitest run --config ../../../vite.config.js",
     "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
@@ -20,7 +20,7 @@
     "lit": "3.1.1"
   },
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.9.0"
+    "@justeattakeaway/pie-components-config": "0.11.0"
   },
   "volta": {
     "extends": "../../../package.json"

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/index.ts

@@ -1,3 +1,4 @@
-export * from './mixins';
 export * from './decorators';
 export * from './functions';
+export * from './interfaces';
+export * from './mixins';

package/src/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './pie-input-element';

package/src/interfaces/pie-input-element.ts

@@ -0,0 +1,3 @@
+export interface PIEInputElement {
+  focusTarget: HTMLElement;
+}

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

@@ -13,7 +13,13 @@ export default defineConfig({
         },
     },
     test: {
+        dir: '.',
         environment: 'jsdom',
-        exclude: ['**/*.browser.spec.ts'],
+        globals: true,
+        exclude: [
+            '**/test/{accessibility,component,system,visual}/*.spec.{js,ts}',
+            '**/test/**/*.browser.spec.{js,ts}',
+            '**/node_modules/**/*'
+        ],
     },
 });