@lukso/core 1.1.0-dev.5ea12c5 → 1.1.0-dev.c21633f

package/dist/services/intl.cjs

@@ -5,6 +5,7 @@
 
 
 var _chunkRM42NG7Ecjs = require('../chunk-RM42NG7E.cjs');
+require('../chunk-ZBDE64SD.cjs');
 
 
 

package/dist/services/intl.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/intl.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,8SAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/intl.cjs"}
+{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/intl.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,8SAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/intl.cjs"}

package/dist/services/intl.js

@@ -5,6 +5,7 @@ import {
   getIntlService,
   setIntlService
 } from "../chunk-4TNWG4ME.js";
+import "../chunk-EUXUH3YW.js";
 export {
   clearIntlService,
   createIntlService,

package/dist/utils/index.cjs

@@ -2,10 +2,15 @@
 
 
 
-var _chunkMBIRTPNMcjs = require('../chunk-MBIRTPNM.cjs');
 
 
+var _chunkQU6NUTY6cjs = require('../chunk-QU6NUTY6.cjs');
+require('../chunk-ZBDE64SD.cjs');
 
 
-exports.EXTENSION_STORE_LINKS = _chunkMBIRTPNMcjs.EXTENSION_STORE_LINKS; exports.browserInfo = _chunkMBIRTPNMcjs.browserInfo; exports.slug = _chunkMBIRTPNMcjs.slug;
+
+
+
+
+exports.EXTENSION_STORE_LINKS = _chunkQU6NUTY6cjs.EXTENSION_STORE_LINKS; exports.UrlConverter = _chunkQU6NUTY6cjs.UrlConverter; exports.UrlResolver = _chunkQU6NUTY6cjs.UrlResolver; exports.browserInfo = _chunkQU6NUTY6cjs.browserInfo; exports.slug = _chunkQU6NUTY6cjs.slug;
 //# sourceMappingURL=index.cjs.map

package/dist/utils/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/utils/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACA;AACA;AACF,oKAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/utils/index.cjs"}
+{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/utils/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,gRAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/utils/index.cjs"}

package/dist/utils/index.d.cts

@@ -29,4 +29,37 @@ declare const browserInfo: (deviceService: DeviceService) => BrowserInfo;
  */
 declare const slug: (value?: string) => string;
 
-export { type BrowserInfo, type BrowserName, EXTENSION_STORE_LINKS, browserInfo, slug };
+declare class UrlConverter {
+    private destination;
+    /**
+     * It will relatively append pathname or hostname to the destination URL
+     *
+     * For example:
+     * destination=https://some.api.gateway/something/ipfs
+     * url=ipfs://QmSomeHash
+     * output=https://some.api.gateway/something/ipfs/QmSomeHash
+     *
+     * destination=https://some.api.gateway/something/ipfs
+     * url=https://something.com/somewhere
+     * output=https://some.api.gateway/something/ipfs/somewhere
+     *
+     * @param destination destination string | URL
+     */
+    constructor(destination: string | URL);
+    resolveUrl(url: string): string;
+}
+declare class UrlResolver {
+    private converters;
+    constructor(converters: Array<[string | RegExp, UrlConverter | string]>);
+    /**
+     * Resolves a URL to a gateway URL.
+     * Supports possible multiple converters transforming the URL
+     * in sequence until no converter matches.
+     *
+     * @param {string} url to resolve
+     * @returns {string} resolved url (if resolver is found, otherwise the parameter url is returned)
+     */
+    resolveUrl(url_: string): string;
+}
+
+export { type BrowserInfo, type BrowserName, EXTENSION_STORE_LINKS, UrlConverter, UrlResolver, browserInfo, slug };

package/dist/utils/index.d.ts

@@ -29,4 +29,37 @@ declare const browserInfo: (deviceService: DeviceService) => BrowserInfo;
  */
 declare const slug: (value?: string) => string;
 
-export { type BrowserInfo, type BrowserName, EXTENSION_STORE_LINKS, browserInfo, slug };
+declare class UrlConverter {
+    private destination;
+    /**
+     * It will relatively append pathname or hostname to the destination URL
+     *
+     * For example:
+     * destination=https://some.api.gateway/something/ipfs
+     * url=ipfs://QmSomeHash
+     * output=https://some.api.gateway/something/ipfs/QmSomeHash
+     *
+     * destination=https://some.api.gateway/something/ipfs
+     * url=https://something.com/somewhere
+     * output=https://some.api.gateway/something/ipfs/somewhere
+     *
+     * @param destination destination string | URL
+     */
+    constructor(destination: string | URL);
+    resolveUrl(url: string): string;
+}
+declare class UrlResolver {
+    private converters;
+    constructor(converters: Array<[string | RegExp, UrlConverter | string]>);
+    /**
+     * Resolves a URL to a gateway URL.
+     * Supports possible multiple converters transforming the URL
+     * in sequence until no converter matches.
+     *
+     * @param {string} url to resolve
+     * @returns {string} resolved url (if resolver is found, otherwise the parameter url is returned)
+     */
+    resolveUrl(url_: string): string;
+}
+
+export { type BrowserInfo, type BrowserName, EXTENSION_STORE_LINKS, UrlConverter, UrlResolver, browserInfo, slug };

package/dist/utils/index.js

@@ -1,10 +1,15 @@
 import {
   EXTENSION_STORE_LINKS,
+  UrlConverter,
+  UrlResolver,
   browserInfo,
   slug
-} from "../chunk-DKXHVRHM.js";
+} from "../chunk-GFLV5EJV.js";
+import "../chunk-EUXUH3YW.js";
 export {
   EXTENSION_STORE_LINKS,
+  UrlConverter,
+  UrlResolver,
   browserInfo,
   slug
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/core",
-  "version": "1.1.0-dev.5ea12c5",
+  "version": "1.1.0-dev.c21633f",
   "description": "Core utilities, services, and mixins for LUKSO web components and applications",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -52,6 +52,11 @@
       "import": "./dist/mixins/intl.js",
       "require": "./dist/mixins/intl.cjs"
     },
+    "./mixins/theme": {
+      "types": "./dist/mixins/theme.d.ts",
+      "import": "./dist/mixins/theme.js",
+      "require": "./dist/mixins/theme.cjs"
+    },
     "./utils": {
       "types": "./dist/utils/index.d.ts",
       "import": "./dist/utils/index.js",
@@ -111,6 +116,7 @@
       "src/mixins/index.ts",
       "src/mixins/device.ts",
       "src/mixins/intl.ts",
+      "src/mixins/theme.ts",
       "src/utils/index.ts"
     ],
     "format": [

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

@@ -0,0 +1,478 @@
+import { html, LitElement } from 'lit'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { withTheme } from '../theme'
+
+describe('withTheme 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-theme-${Math.random().toString(36).slice(2)}`
+
+    // Create a test component using the mixin
+    TestComponent = class extends withTheme(LitElement) {
+      render() {
+        return html`
+          <div class="test-content bg-neutral-100 dark:bg-neutral-10">
+            Theme: ${this.theme}
+          </div>
+        `
+      }
+    }
+
+    // Register the component before instantiation
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, TestComponent)
+    }
+
+    element = new TestComponent()
+  })
+
+  afterEach(() => {
+    if (element?.parentElement) {
+      element.remove()
+    }
+  })
+
+  describe('Initialization', () => {
+    it('should have default theme property set to "light"', () => {
+      expect(element.theme).toBe('light')
+    })
+
+    it('should have isDark property set to false by default', () => {
+      expect(element.isDark).toBe(false)
+    })
+
+    it('should have theme property reflected to attribute', async () => {
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(element.hasAttribute('theme')).toBe(true)
+      expect(element.getAttribute('theme')).toBe('light')
+    })
+  })
+
+  describe('Theme Root Creation', () => {
+    it('should create a theme root div', async () => {
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      const shadowRoot = element.shadowRoot
+      expect(shadowRoot).toBeDefined()
+
+      const themeRoot = shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot).toBeDefined()
+      expect(themeRoot?.tagName).toBe('DIV')
+    })
+
+    it('should have data-theme-root attribute', async () => {
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.hasAttribute('data-theme-root')).toBe(true)
+    })
+
+    it('should render content inside theme root', async () => {
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      const content = themeRoot?.querySelector('.test-content')
+      expect(content).toBeDefined()
+    })
+  })
+
+  describe('Light Theme', () => {
+    it('should not have dark class when theme is light', async () => {
+      element.theme = 'light'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.classList.contains('dark')).toBe(false)
+    })
+
+    it('should set isDark to false when theme is light', async () => {
+      element.theme = 'light'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(element.isDark).toBe(false)
+    })
+
+    it('should update attribute when theme is set to light', async () => {
+      element.theme = 'light'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(element.getAttribute('theme')).toBe('light')
+    })
+  })
+
+  describe('Dark Theme', () => {
+    it('should have dark class when theme is dark', async () => {
+      element.theme = 'dark'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.classList.contains('dark')).toBe(true)
+    })
+
+    it('should set isDark to true when theme is dark', async () => {
+      element.theme = 'dark'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(element.isDark).toBe(true)
+    })
+
+    it('should update attribute when theme is set to dark', async () => {
+      element.theme = 'dark'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(element.getAttribute('theme')).toBe('dark')
+    })
+  })
+
+  describe('Auto Theme', () => {
+    it('should set theme to auto', () => {
+      element.theme = 'auto'
+      expect(element.theme).toBe('auto')
+    })
+
+    it('should detect system preference when theme is auto', async () => {
+      // Mock matchMedia to return dark mode
+      const matchMediaMock = vi.fn((query) => ({
+        matches: query === '(prefers-color-scheme: dark)',
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }))
+      vi.stubGlobal('matchMedia', matchMediaMock)
+
+      element.theme = 'auto'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(element.isDark).toBe(true)
+
+      vi.unstubAllGlobals()
+    })
+
+    it('should listen for system theme changes when theme is auto', async () => {
+      const addEventListenerSpy = vi.fn()
+      const matchMediaMock = vi.fn(() => ({
+        matches: false,
+        media: '(prefers-color-scheme: dark)',
+        addEventListener: addEventListenerSpy,
+        removeEventListener: vi.fn(),
+      }))
+      vi.stubGlobal('matchMedia', matchMediaMock)
+
+      element.theme = 'auto'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
+        'change',
+        expect.any(Function)
+      )
+
+      vi.unstubAllGlobals()
+    })
+
+    it('should remove event listener when theme changes from auto', async () => {
+      const removeEventListenerSpy = vi.fn()
+      const addEventListenerSpy = vi.fn()
+      const matchMediaMock = vi.fn(() => ({
+        matches: false,
+        media: '(prefers-color-scheme: dark)',
+        addEventListener: addEventListenerSpy,
+        removeEventListener: removeEventListenerSpy,
+      }))
+      vi.stubGlobal('matchMedia', matchMediaMock)
+
+      element.theme = 'auto'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      // Change theme from auto to light
+      element.theme = 'light'
+      await element.updateComplete
+
+      expect(removeEventListenerSpy).toHaveBeenCalled()
+
+      vi.unstubAllGlobals()
+    })
+  })
+
+  describe('Theme Switching', () => {
+    it('should switch from light to dark', async () => {
+      document.body.appendChild(element)
+      element.theme = 'light'
+      await element.updateComplete
+      await element.updateComplete // Wait for property change update
+
+      let themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.classList.contains('dark')).toBe(false)
+
+      element.theme = 'dark'
+      await element.updateComplete
+      await element.updateComplete // Wait for property change update
+
+      themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.classList.contains('dark')).toBe(true)
+    })
+
+    it('should switch from dark to light', async () => {
+      document.body.appendChild(element)
+      element.theme = 'dark'
+      await element.updateComplete
+      await element.updateComplete // Wait for property change update
+
+      let themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.classList.contains('dark')).toBe(true)
+
+      element.theme = 'light'
+      await element.updateComplete
+      await element.updateComplete // Wait for property change update
+
+      themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.classList.contains('dark')).toBe(false)
+    })
+
+    it('should update isDark when switching themes', async () => {
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      element.theme = 'dark'
+      await element.updateComplete
+      expect(element.isDark).toBe(true)
+
+      element.theme = 'light'
+      await element.updateComplete
+      expect(element.isDark).toBe(false)
+    })
+  })
+
+  describe('Multiple Instances', () => {
+    it('should work with multiple component instances', async () => {
+      const element2 = new TestComponent()
+
+      element.theme = 'dark'
+      element2.theme = 'light'
+
+      document.body.appendChild(element)
+      document.body.appendChild(element2)
+      await element.updateComplete
+      await element2.updateComplete
+
+      expect(element.isDark).toBe(true)
+      expect(element2.isDark).toBe(false)
+
+      const themeRoot1 = element.shadowRoot?.querySelector('[data-theme-root]')
+      const themeRoot2 = element2.shadowRoot?.querySelector('[data-theme-root]')
+
+      expect(themeRoot1?.classList.contains('dark')).toBe(true)
+      expect(themeRoot2?.classList.contains('dark')).toBe(false)
+
+      element2.remove()
+    })
+
+    it('should not affect other instances when changing theme', async () => {
+      const element2 = new TestComponent()
+
+      document.body.appendChild(element)
+      document.body.appendChild(element2)
+      await element.updateComplete
+      await element2.updateComplete
+
+      element.theme = 'dark'
+      await element.updateComplete
+
+      expect(element.isDark).toBe(true)
+      expect(element2.isDark).toBe(false)
+
+      element2.remove()
+    })
+  })
+
+  describe('Lifecycle', () => {
+    it('should cleanup event listener on disconnect when theme is auto', async () => {
+      const removeEventListenerSpy = vi.fn()
+      const matchMediaMock = vi.fn(() => ({
+        matches: false,
+        media: '(prefers-color-scheme: dark)',
+        addEventListener: vi.fn(),
+        removeEventListener: removeEventListenerSpy,
+      }))
+      vi.stubGlobal('matchMedia', matchMediaMock)
+
+      element.theme = 'auto'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      element.remove()
+
+      expect(removeEventListenerSpy).toHaveBeenCalled()
+
+      vi.unstubAllGlobals()
+    })
+
+    it('should maintain theme property after disconnection', async () => {
+      element.theme = 'dark'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      const themeBefore = element.theme
+      const isDarkBefore = element.isDark
+
+      element.remove()
+
+      expect(element.theme).toBe(themeBefore)
+      expect(element.isDark).toBe(isDarkBefore)
+    })
+  })
+
+  describe('Mixin Composition', () => {
+    it('should work when composed with other mixins', async () => {
+      // Simple test mixin
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const withTestFeature = <T extends typeof LitElement>(Base: T): any => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return class extends (Base as any) {
+          testProperty = 'test'
+        }
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const ComposedComponent: any = class extends withTheme(
+        withTestFeature(LitElement)
+      ) {
+        render() {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          return html`<div>${(this as any).testProperty}</div>`
+        }
+      }
+
+      const composedTagName = `test-composed-${Math.random().toString(36).slice(2)}`
+      customElements.define(composedTagName, ComposedComponent)
+
+      const composedElement = new ComposedComponent()
+      document.body.appendChild(composedElement)
+      await composedElement.updateComplete
+
+      // Should have both theme and test properties
+      expect(composedElement.theme).toBeDefined()
+      expect(composedElement.isDark).toBeDefined()
+      expect(composedElement.testProperty).toBe('test')
+
+      // Should have theme root
+      const themeRoot =
+        composedElement.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot).toBeDefined()
+
+      composedElement.remove()
+    })
+  })
+
+  describe('System Preference Changes', () => {
+    it('should update isDark when system preference changes in auto mode', async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const handlers: any[] = []
+      const matchMediaMock = vi.fn(() => ({
+        matches: false,
+        media: '(prefers-color-scheme: dark)',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        addEventListener: (_: string, handler: any) => {
+          handlers.push(handler)
+        },
+        removeEventListener: vi.fn(),
+      }))
+      vi.stubGlobal('matchMedia', matchMediaMock)
+
+      element.theme = 'auto'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(element.isDark).toBe(false)
+
+      // Simulate system preference change to dark
+      expect(handlers.length).toBeGreaterThan(0)
+      handlers[0]({ matches: true })
+      await element.updateComplete
+
+      expect(element.isDark).toBe(true)
+
+      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.classList.contains('dark')).toBe(true)
+
+      vi.unstubAllGlobals()
+    })
+
+    it('should update isDark when system preference changes to light in auto mode', async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const handlers: any[] = []
+      const matchMediaMock = vi.fn(() => ({
+        matches: true, // Start with dark
+        media: '(prefers-color-scheme: dark)',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        addEventListener: (_: string, handler: any) => {
+          handlers.push(handler)
+        },
+        removeEventListener: vi.fn(),
+      }))
+      vi.stubGlobal('matchMedia', matchMediaMock)
+
+      element.theme = 'auto'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(element.isDark).toBe(true)
+
+      // Simulate system preference change to light
+      expect(handlers.length).toBeGreaterThan(0)
+      handlers[0]({ matches: false })
+      await element.updateComplete
+
+      expect(element.isDark).toBe(false)
+
+      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.classList.contains('dark')).toBe(false)
+
+      vi.unstubAllGlobals()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle rapid theme changes', () => {
+      element.theme = 'dark'
+      element.theme = 'light'
+      element.theme = 'dark'
+      element.theme = 'auto'
+
+      expect(element.theme).toBe('auto')
+      expect(element.isDark).toBeDefined()
+    })
+
+    it('should handle theme changes before connection', () => {
+      element.theme = 'dark'
+      expect(element.theme).toBe('dark')
+    })
+
+    it('should properly initialize when connected with pre-set theme', async () => {
+      element.theme = 'dark'
+      document.body.appendChild(element)
+      await element.updateComplete
+
+      expect(element.isDark).toBe(true)
+      const themeRoot = element.shadowRoot?.querySelector('[data-theme-root]')
+      expect(themeRoot?.classList.contains('dark')).toBe(true)
+    })
+  })
+})

package/src/mixins/index.ts

@@ -6,3 +6,4 @@
 
 export { withDeviceService } from './device.js'
 export { withIntlService } from './intl.js'
+export { type Theme, withTheme } from './theme.js'