@lukso/transaction-view-core 0.7.0 → 0.7.1-dev.4e0de64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/transaction-view-core",
-  "version": "0.7.0",
+  "version": "0.7.1-dev.4e0de64",
   "description": "Core components and hooks for LUKSO transaction display",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -38,8 +38,9 @@
     "@preact/signals-core": "^1.13.0",
     "ethereum-blockies-base64": "^1.0.2",
     "viem": "^2.46.1",
-    "@lukso/transaction-view-headless": "0.4.9",
-    "@lukso/transaction-decoder": "1.3.8"
+    "@lukso/core": "1.5.0-dev.4e0de64",
+    "@lukso/transaction-decoder": "1.3.8-dev.4e0de64",
+    "@lukso/transaction-view-headless": "0.4.9-dev.4e0de64"
   },
   "peerDependencies": {
     "@lit/task": "^1.0.3",

package/src/components/asset-card.ts

@@ -10,11 +10,11 @@ import '../shared/image-list.js'
 // Import LUKSO web components
 import '@lukso/web-components/components'
 import { Task } from '@lit/task'
+import { safeCustomElement } from '@lukso/core/utils'
 import {
   type ResolvedAddress,
   useAddressResolver,
 } from '@lukso/transaction-view-headless'
-import { safeCustomElement } from '../shared/safe-custom-element.js'
 import { CoreLitElement } from '../styles'
 import { formatUnits, parseBigInt } from '../utils.js'
 

package/src/components/contract-card.ts

@@ -1,7 +1,7 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import type { ResolvedAddress } from '@lukso/transaction-view-headless'
 import { css, html, LitElement } from 'lit'
 import { property, state } from 'lit/decorators.js'
-import { safeCustomElement } from '../shared/safe-custom-element'
 import '../shared/load-web-components'
 
 /**

package/src/components/description-view.ts

@@ -1,8 +1,8 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { css, html, LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
 import { when } from 'lit/directives/when.js'
-import { safeCustomElement } from '../shared/safe-custom-element'
 
 // Import the EnhancedInfo type from the decoder package
 type EnhancedInfo = {

package/src/components/info-panel.ts

@@ -1,10 +1,10 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import type { ResolvedAddress } from '@lukso/transaction-view-headless'
 import { css, html, LitElement } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { repeat } from 'lit/directives/repeat.js'
 import { when } from 'lit/directives/when.js'
-import { safeCustomElement } from '../shared/safe-custom-element'
 import '../shared/icon-view.js'
 import '../shared/address-view.js'
 import '../shared/image-list.js'

package/src/components/permissions-block.ts

@@ -1,6 +1,6 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { html, nothing } from 'lit'
 import { property } from 'lit/decorators.js'
-import { safeCustomElement } from '../shared/safe-custom-element'
 import { CoreLitElement } from '../styles'
 import '../shared/load-web-components'
 

package/src/components/transaction-playback.ts

@@ -1,3 +1,4 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import {
   type DecoderResult,
   decodeTransaction,
@@ -19,7 +20,6 @@ import { createRef, type Ref, ref } from 'lit/directives/ref.js'
 import { when } from 'lit/directives/when.js'
 import type { Chain, Transaction } from 'viem'
 import { getGlobalLitLoader } from '../registry/lit-view-loader'
-import { safeCustomElement } from '../shared/safe-custom-element'
 import { CoreLitElement } from '../styles'
 
 /**

package/src/components/universal-token-view.ts

@@ -1,7 +1,7 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { css, html, LitElement } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
-import { safeCustomElement } from '../shared/safe-custom-element'
 import './asset-card.js'
 import './description-view.js'
 import './info-panel.js'

package/src/shared/address-display.ts

@@ -1,11 +1,11 @@
 import { Task } from '@lit/task'
+import { safeCustomElement } from '@lukso/core/utils'
 import {
   useAddressResolver,
   useImageLoader,
 } from '@lukso/transaction-view-headless'
 import { css, html, LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
-import { safeCustomElement } from './safe-custom-element'
 
 // LUKSO web components are loaded dynamically via plugin
 

package/src/shared/address-view.ts

@@ -1,9 +1,9 @@
 import { Task } from '@lit/task'
+import { safeCustomElement } from '@lukso/core/utils'
 import { useAddressResolver } from '@lukso/transaction-view-headless'
 import makeBlockie from 'ethereum-blockies-base64'
 import { html } from 'lit'
 import { property, state } from 'lit/decorators.js'
-import { safeCustomElement } from './safe-custom-element'
 
 // Import LUKSO web components
 import './load-web-components'

package/src/shared/custom-select.ts

@@ -1,6 +1,6 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { html } from 'lit'
 import { property } from 'lit/decorators.js'
-import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import makeBlockie from 'ethereum-blockies-base64'
 import { CoreLitElement } from '../styles'

package/src/shared/function-name-view.ts

@@ -1,6 +1,6 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { html } from 'lit'
 import { property } from 'lit/decorators.js'
-import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'
 

package/src/shared/gas-provider-view.ts

@@ -1,6 +1,6 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { html } from 'lit'
 import { property } from 'lit/decorators.js'
-import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'
 

package/src/shared/icon-view.ts

@@ -1,4 +1,5 @@
 import { Task } from '@lit/task'
+import { safeCustomElement } from '@lukso/core/utils'
 import {
   type ImageResult,
   useAddressResolver,
@@ -7,7 +8,6 @@ import {
 import { html } from 'lit'
 import { property } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
-import { safeCustomElement } from './safe-custom-element'
 
 // LUKSO web components are loaded dynamically via plugin
 

package/src/shared/image-list.ts

@@ -1,9 +1,9 @@
 import { Task } from '@lit/task'
+import { safeCustomElement } from '@lukso/core/utils'
 import { useAddressResolver } from '@lukso/transaction-view-headless'
 import { html } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
-import { safeCustomElement } from './safe-custom-element'
 import './icon-view.js'
 import { CoreLitElement } from '../styles'
 

package/src/shared/index.ts

@@ -1,5 +1,7 @@
 // Shared atomic components
 
+export { safeCustomElement } from '@lukso/core/utils'
+
 export * from './address-display'
 // Export types
 export type { AddressData } from './address-display.js'
@@ -15,7 +17,6 @@ export {
 } from './image-loader-controller.js'
 export * from './notification-view'
 export * from './progress-view'
-export * from './safe-custom-element'
 export * from './scroll-to-bottom-button'
 // Export signal integration controllers and utilities
 export {

package/src/shared/notification-view.ts

@@ -1,6 +1,6 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { html } from 'lit'
 import { property, state } from 'lit/decorators.js'
-import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'
 

package/src/shared/progress-view.ts

@@ -1,7 +1,7 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { html } from 'lit'
 import { property } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
-import { safeCustomElement } from './safe-custom-element'
 
 export type ProgressSegment = {
   value: number

package/src/shared/scroll-to-bottom-button.ts

@@ -1,7 +1,7 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { html } from 'lit'
 import { property } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
-import { safeCustomElement } from './safe-custom-element'
 
 /**
  * ScrollToBottomButton (core) - reusable scroll helper.

package/src/shared/url-view.ts

@@ -1,6 +1,6 @@
+import { safeCustomElement } from '@lukso/core/utils'
 import { html } from 'lit'
 import { property, state } from 'lit/decorators.js'
-import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'
 

package/src/shared/value-view.ts

@@ -1,9 +1,9 @@
 import { Task } from '@lit/task'
+import { safeCustomElement } from '@lukso/core/utils'
 import { useAddressResolver } from '@lukso/transaction-view-headless'
 import { html, type TemplateResult } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
-import { safeCustomElement } from './safe-custom-element'
 
 // Import LUKSO web components
 import './load-web-components'

package/tsup.config.ts

@@ -80,6 +80,7 @@ export default defineConfig({
     },
   ],
   external: [
+    '@lukso/core',
     '@lukso/transaction-view-headless',
     '@lukso/transaction-decoder',
     '@lukso/web-components',

package/src/shared/safe-custom-element.ts

@@ -1,36 +0,0 @@
-/**
- * SSR-safe custom element decorator that prevents duplicate registration errors.
- *
- * ## Why this exists
- *
- * The standard `@customElement()` decorator from Lit will throw an error if
- * a component is registered twice. This can happen in SSR environments where:
- * - Components are dynamically imported via multiple paths
- * - HMR causes modules to be re-executed during development
- * - Server and client bundles both try to register components
- *
- * ## Usage
- *
- * Use this instead of `@customElement()`:
- * ```ts
- * import { safeCustomElement } from './safe-custom-element'
- *
- * @safeCustomElement('my-component')
- * export class MyComponent extends LitElement {
- *   // ...
- * }
- * ```
- *
- * @param tagName - The custom element tag name (must contain a hyphen)
- * @returns A class decorator that safely registers the element
- */
-export function safeCustomElement(tagName: string) {
-  return <T extends CustomElementConstructor>(classOrDescriptor: T): T => {
-    // Only register if not already defined
-    if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
-      customElements.define(tagName, classOrDescriptor)
-    }
-
-    return classOrDescriptor
-  }
-}