@lukso/core 0.1.0-dev.0f1bea5

package/src/mixins/__tests__/device.spec.ts

@@ -0,0 +1,119 @@
+import { html, LitElement } from 'lit'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { withDeviceService } from '../device'
+
+describe('withDeviceService Mixin', () => {
+  let element: any
+  let TestComponent: any
+  let tagName: string
+
+  beforeEach(() => {
+    // Create a unique tag name for each test to avoid registration conflicts
+    tagName = `test-device-${Math.random().toString(36).slice(2)}`
+
+    // Create a test component using the mixin
+    TestComponent = class extends withDeviceService(LitElement) {
+      render() {
+        return html`<div>${this.device?.isMobile ? 'mobile' : 'desktop'}</div>`
+      }
+    }
+
+    // Register the component before instantiation
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, TestComponent)
+    }
+
+    element = new TestComponent()
+  })
+
+  afterEach(() => {
+    if (element?.parentElement) {
+      element.remove()
+    }
+  })
+
+  it('should initialize device service when connected', async () => {
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    expect(element.device).toBeDefined()
+    expect(typeof element.device).toBe('object')
+  })
+
+  it('should have device detection methods', async () => {
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    expect(element.device).toHaveProperty('isMobile')
+    expect(element.device).toHaveProperty('isTablet')
+    expect(element.device).toHaveProperty('isDesktop')
+  })
+
+  it('should have OS detection properties', async () => {
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    expect(element.device).toHaveProperty('isIOS')
+    expect(element.device).toHaveProperty('isAndroid')
+    expect(element.device).toHaveProperty('isWindows')
+    expect(element.device).toHaveProperty('isMacOS')
+    expect(element.device).toHaveProperty('isLinux')
+  })
+
+  it('should have browser detection properties', async () => {
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    expect(element.device).toHaveProperty('isChrome')
+    expect(element.device).toHaveProperty('isSafari')
+    expect(element.device).toHaveProperty('isFirefox')
+    expect(element.device).toHaveProperty('isEdge')
+    expect(element.device).toHaveProperty('isOpera')
+  })
+
+  it('should have getRaw method', async () => {
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    expect(element.device).toHaveProperty('getRaw')
+    expect(typeof element.device.getRaw).toBe('function')
+  })
+
+  it('should provide device detection values as booleans', async () => {
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    expect(typeof element.device.isMobile).toBe('boolean')
+    expect(typeof element.device.isDesktop).toBe('boolean')
+    expect(typeof element.device.isChrome).toBe('boolean')
+  })
+
+  it('should work with multiple component instances', async () => {
+    const element2 = new TestComponent()
+
+    document.body.appendChild(element)
+    document.body.appendChild(element2)
+    await element.updateComplete
+    await element2.updateComplete
+
+    expect(element.device).toBeDefined()
+    expect(element2.device).toBeDefined()
+    // Both instances should have the same device data
+    expect(element.device.isMobile).toEqual(element2.device.isMobile)
+
+    element2.remove()
+  })
+
+  it('should maintain device property after disconnection', async () => {
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    const deviceBefore = element.device
+    element.remove()
+    const deviceAfter = element.device
+
+    // Device reference should still exist after disconnection
+    expect(deviceAfter).toBeDefined()
+    expect(deviceAfter).toEqual(deviceBefore)
+  })
+})

package/src/mixins/__tests__/intl.spec.ts

@@ -0,0 +1,198 @@
+import { html, LitElement } from 'lit'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import {
+  clearIntlService,
+  createIntlService,
+  setIntlService,
+} from '../../services/intl'
+import { withIntlService } from '../intl'
+
+describe('withIntlService Mixin', () => {
+  let element: any
+  let TestComponent: any
+  let tagName: string
+
+  beforeEach(() => {
+    clearIntlService()
+
+    // Create a unique tag name for each test to avoid registration conflicts
+    tagName = `test-intl-${Math.random().toString(36).slice(2)}`
+
+    // Create a test component using the mixin
+    TestComponent = class extends withIntlService(LitElement) {
+      render() {
+        return html`<div>${this.formatMessage('greeting')}</div>`
+      }
+    }
+
+    // Register the component before instantiation
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, TestComponent)
+    }
+
+    element = new TestComponent()
+  })
+
+  afterEach(() => {
+    if (element?.parentElement) {
+      element.remove()
+    }
+    clearIntlService()
+  })
+
+  it('should add formatMessage method to component', async () => {
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    expect(element).toHaveProperty('formatMessage')
+    expect(typeof element.formatMessage).toBe('function')
+  })
+
+  it('should use global intl service when available', async () => {
+    const intl = createIntlService({
+      locale: 'en-US',
+      messages: { greeting: 'Hello' },
+    })
+    setIntlService(intl)
+
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    const result = element.formatMessage('greeting')
+    expect(result).toBe('Hello')
+  })
+
+  it('should create fallback behavior if global service not available', async () => {
+    clearIntlService()
+
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    // Should return key as fallback
+    const result = element.formatMessage('any_key')
+    expect(result).toBe('any_key')
+  })
+
+  it('should format messages with variables', async () => {
+    const intl = createIntlService({
+      locale: 'en-US',
+      messages: {
+        welcome: 'Welcome, {name}!',
+      },
+    })
+    setIntlService(intl)
+
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    const result = element.formatMessage('welcome', { name: 'John' })
+    expect(result).toContain('Welcome')
+    expect(result).toContain('John')
+  })
+
+  it('should return key as fallback for missing messages', async () => {
+    const intl = createIntlService({
+      locale: 'en-US',
+      messages: {},
+    })
+    setIntlService(intl)
+
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    const result = element.formatMessage('missing_key')
+    expect(result).toBe('missing_key')
+  })
+
+  it('should reflect locale changes in formatting', async () => {
+    const intl = createIntlService({
+      locale: 'en-US',
+      messages: { greeting: 'Hello' },
+    })
+    setIntlService(intl)
+
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    expect(element.formatMessage('greeting')).toBe('Hello')
+
+    intl.setLocale('de-DE', { greeting: 'Hallo' })
+    await element.updateComplete
+
+    expect(element.formatMessage('greeting')).toBe('Hallo')
+  })
+
+  it('should work with multiple component instances using same global service', async () => {
+    const intl = createIntlService({
+      locale: 'en-US',
+      messages: { greeting: 'Hello' },
+    })
+    setIntlService(intl)
+
+    const element2 = new TestComponent()
+
+    document.body.appendChild(element)
+    document.body.appendChild(element2)
+    await element.updateComplete
+    await element2.updateComplete
+
+    expect(element.formatMessage('greeting')).toBe('Hello')
+    expect(element2.formatMessage('greeting')).toBe('Hello')
+
+    element2.remove()
+  })
+
+  it('should handle locale changes without errors', async () => {
+    const intl = createIntlService({
+      locale: 'en-US',
+      messages: { greeting: 'Hello' },
+    })
+    setIntlService(intl)
+
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    // Rapidly change locales - should not throw
+    expect(() => {
+      intl.setLocale('de-DE', { greeting: 'Hallo' })
+      intl.setLocale('fr-FR', { greeting: 'Bonjour' })
+      intl.setLocale('es-ES', { greeting: 'Hola' })
+    }).not.toThrow()
+
+    expect(element.formatMessage('greeting')).toBe('Hola')
+  })
+
+  it('should handle undefined key gracefully', async () => {
+    const intl = createIntlService({
+      locale: 'en-US',
+      messages: {},
+    })
+    setIntlService(intl)
+
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    // Should not throw with undefined key
+    expect(() => {
+      element.formatMessage(undefined)
+    }).not.toThrow()
+  })
+
+  it('should work after component disconnection', async () => {
+    const intl = createIntlService({
+      locale: 'en-US',
+      messages: { greeting: 'Hello' },
+    })
+    setIntlService(intl)
+
+    document.body.appendChild(element)
+    await element.updateComplete
+
+    element.remove()
+
+    // Locale changes should still work without errors
+    expect(() => {
+      intl.setLocale('de-DE', { greeting: 'Hallo' })
+    }).not.toThrow()
+  })
+})

package/src/mixins/device.ts

@@ -0,0 +1,48 @@
+/**
+ * Device Detection Mixin
+ *
+ * Mixin to add device detection service to a Lit component
+ */
+
+import type { LitElement } from 'lit'
+import type { DeviceService } from '../services/device.js'
+import { deviceService, type NavigatorExtended } from '../services/device.js'
+
+/**
+ * Mixin to add device detection service to a Lit component
+ *
+ * Provides a `device` property with device/OS/browser detection capabilities.
+ * The device service is initialized in connectedCallback and follows component lifecycle.
+ *
+ * @typeParam T - The Lit component class being extended
+ * @returns Extended class with device detection capabilities
+ *
+ * @example
+ * ```typescript
+ * import { LitElement } from 'lit';
+ * import { customElement } from 'lit/decorators.js';
+ * import { withDeviceService } from '@lukso/core/mixins';
+ *
+ * @customElement('my-component')
+ * export class MyComponent extends withDeviceService(LitElement) {
+ *   render() {
+ *     return html\`Device is mobile: \${this.device?.isMobile}\`;
+ *   }
+ * }
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function withDeviceService<T extends typeof LitElement>(Base: T): any {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  class Mixin extends (Base as any) {
+    device: DeviceService | undefined
+
+    connectedCallback(): void {
+      super.connectedCallback()
+      this.device = deviceService(navigator as NavigatorExtended)
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return Mixin as any
+}

package/src/mixins/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @lukso/core - Mixins
+ *
+ * Reusable Lit component mixins for device detection, internationalization, and more
+ */
+
+export { withDeviceService } from './device.js'
+export { withIntlService } from './intl.js'

package/src/mixins/intl.ts

@@ -0,0 +1,112 @@
+/**
+ * Internationalization Mixin
+ *
+ * Mixin to add internationalization service to a Lit component
+ */
+
+import { effect } from '@preact/signals-core'
+import type { LitElement } from 'lit'
+import englishTranslations from '../../../translations/en_US.json'
+import {
+  createIntlService,
+  defaultConfig,
+  getIntlService,
+  type IntlService,
+  setIntlService,
+} from '../services/intl.js'
+
+/**
+ * Mixin to add internationalization service to a Lit component
+ *
+ * Provides access to the global intl service with reactive locale changes.
+ * Automatically subscribes to locale changes and triggers re-renders.
+ *
+ * The component will use the global intl service if available, or create a local one.
+ * This follows the singleton pattern for the global service while allowing flexibility.
+ *
+ * @typeParam T - The Lit component class being extended
+ * @returns Extended class with intl service capabilities
+ *
+ * @example
+ * ```typescript
+ * import { LitElement, html } from 'lit';
+ * import { customElement } from 'lit/decorators.js';
+ * import { withIntlService } from '@lukso/core/mixins';
+ *
+ * @customElement('my-component')
+ * export class MyComponent extends withIntlService(LitElement) {
+ *   render() {
+ *     return html\`<p>\${this.formatMessage('app.welcome')}</p>\`;
+ *   }
+ * }
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function withIntlService<T extends typeof LitElement>(Base: T): any {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  class Mixin extends (Base as any) {
+    protected unsubscribeIntl: (() => void) | undefined = undefined
+
+    connectedCallback(): void {
+      super.connectedCallback()
+
+      // Subscribe to intl changes via signal
+      let intl: IntlService | null = getIntlService()
+
+      // When no intl is provided by host app we initialize our own
+      if (!intl) {
+        intl = this.setupLocalIntl() ?? null
+      }
+
+      if (intl) {
+        this.unsubscribeIntl = effect(() => {
+          // Access the signal to track changes
+          intl?.localeChanged.value
+          this.requestUpdate()
+        })
+      }
+
+      // Set fallback for missing translations
+      intl?.setFallbackTranslations(englishTranslations as any)
+    }
+
+    disconnectedCallback(): void {
+      super.disconnectedCallback()
+
+      // Unsubscribe from intl changes
+      if (typeof this.unsubscribeIntl === 'function') {
+        this.unsubscribeIntl()
+      }
+    }
+
+    /**
+     * Setup a local intl service with default configuration
+     * Subclasses can override this to customize initialization
+     */
+    protected setupLocalIntl(): IntlService | undefined {
+      const intlService = createIntlService(
+        Object.assign(defaultConfig, {
+          messages: englishTranslations,
+        })
+      )
+      setIntlService(intlService)
+      return intlService
+    }
+
+    /**
+     * Format message using the intl service
+     */
+    formatMessage(key?: string, options?: Record<string, string>): string {
+      if (!key) {
+        console.warn('No translation key provided to formatMessage')
+        return ''
+      }
+
+      const intl = getIntlService()
+      return intl?.formatMessage(key, options) ?? key
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return Mixin as any
+}

package/src/services/__tests__/device.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { deviceService } from '../device'
+
+describe('deviceService', () => {
+  it('should create a device service instance', () => {
+    const device = deviceService()
+    expect(device).toBeDefined()
+    expect(device.getRaw).toBeDefined()
+  })
+
+  it('should have device detection properties', () => {
+    const device = deviceService()
+    expect(device).toHaveProperty('isMobile')
+    expect(device).toHaveProperty('isTablet')
+    expect(device).toHaveProperty('isDesktop')
+  })
+
+  it('should have OS detection properties', () => {
+    const device = deviceService()
+    expect(device).toHaveProperty('isIOS')
+    expect(device).toHaveProperty('isAndroid')
+    expect(device).toHaveProperty('isWindows')
+    expect(device).toHaveProperty('isMacOS')
+    expect(device).toHaveProperty('isLinux')
+  })
+
+  it('should have browser detection properties', () => {
+    const device = deviceService()
+    expect(device).toHaveProperty('isChrome')
+    expect(device).toHaveProperty('isSafari')
+    expect(device).toHaveProperty('isFirefox')
+    expect(device).toHaveProperty('isEdge')
+    expect(device).toHaveProperty('isOpera')
+    expect(device).toHaveProperty('isBrave')
+  })
+})