@stellar-expert/ui-framework 1.16.8 → 1.17.0

package/meta/page-meta-tags.js

@@ -1,239 +1,244 @@
-import {useEffect} from 'react'
-import isEqual from 'react-fast-compare'
-
-const metaProps = {
-    serviceTitle: '',
-    description: '',
-    image: '',
-    imageEndpoint: '',
-    origin: '',
-    domain: ''
-}
-
-setOrigin(window.location.origin)
-
-/**
- * Initialize default meta properties for the application
- * @param {{serviceTitle: String, description: String, origin: String, [image]: String, [imageEndpoint]: String}} appMetaProps
- */
-export function initMeta(appMetaProps) {
-    const {origin, ...props} = appMetaProps
-    Object.assign(metaProps, props)
-    if (origin) {
-        setOrigin(origin)
-    }
-}
-
-function setOrigin(origin) {
-    metaProps.origin = origin
-    metaProps.domain = origin.replace(/https?:\/\//, '')
-}
-
-function formatPageTitle(title) {
-    if (!title)
-        return metaProps.serviceTitle
-    if (title.includes(metaProps.serviceTitle))
-        return title
-    return `${title} ${metaProps.serviceTitle}`
-}
-
-function generateCanonicalLink(params, canonicalUrl) {
-    return {
-        tag: 'link',
-        locator: 'rel',
-        tags: [
-            {name: 'canonical', content: canonicalUrl, attribute: 'href'}
-        ]
-    }
-}
-
-function generateDescriptionMeta({description}) {
-    return {
-        locator: 'name',
-        tags: [
-            {name: 'description', content: description || metaProps.description}
-        ]
-    }
-}
-
-function generateOpenGraphMeta({description, title, image}, canonicalUrl) {
-    //imageEndpoint
-    return {
-        locator: 'property',
-        tags: [
-            {name: 'og:title', content: formatPageTitle(title)},
-            {name: 'og:url', content: canonicalUrl},
-            {name: 'og:site_name', content: formatPageTitle(metaProps.serviceTitle)},
-            {name: 'og:description', content: description || metaProps.description},
-            {name: 'og:type', content: 'website'},
-            {name: 'og:image:width', content: 1200},
-            {name: 'og:image:height', content: 630},
-            {name: 'og:image', content: formatPageImage(image, canonicalUrl)}
-        ]
-    }
-}
-
-function generateItemPropSchema({description, title, image}) {
-    return {
-        locator: 'itemprop',
-        tags: [
-            {name: 'name', content: title},
-            {name: 'description', content: description || metaProps.description},
-            {name: 'image', content: image || metaProps.image}
-        ]
-    }
-}
-
-function generateLdJsonSchema({title, description, image}, canonicalUrl) {
-    return {
-        tag: 'script',
-        locator: 'type',
-        tags: [
-            {
-                name: 'application/ld+json',
-                content: JSON.stringify({
-                    '@context': 'http://schema.org',
-                    '@type': 'WebPage',
-                    name: formatPageTitle(title),
-                    description: description || metaProps.description,
-                    url: canonicalUrl,
-                    thumbnailUrl: formatPageImage(image, canonicalUrl),
-                    publisher: {
-                        '@type': 'ProfilePage',
-                        name: metaProps.serviceTitle
-                    }
-                })
-            }
-        ]
-    }
-}
-
-/**
- * @param {MetaTagReplacement} replacement
- */
-function replaceMetaTags(replacement) {
-    const {tag, tags, locator} = replacement
-    const selector = tag || 'meta'
-    tags.forEach(tagSettings => {
-        let tag = document.querySelector(`${selector}[${locator}="${tagSettings.name}"]`)
-        if (!tag) {
-            tag = createTag(selector)
-            tag.setAttribute(locator, tagSettings.name)
-        }
-        if (selector === 'meta') {
-            tag.content = tagSettings.content
-        } else if (tagSettings.attribute) {
-            tag[tagSettings.attribute] = tagSettings.content
-        } else {
-            tag.innerText = tagSettings.content
-        }
-    })
-}
-
-function createTag(tagName, props) {
-    let tag = document.createElement(tagName)
-    for (let key in props) {
-        tag[key] = props[key]
-    }
-    document.head.appendChild(tag)
-    return tag
-}
-
-function removeTag(selector) {
-    let tag = document.querySelector(selector)
-    if (tag) {
-        tag.parentElement.removeChild(tag)
-    }
-}
-
-function formatCanonicalUrl() {
-    return metaProps.origin + window.location.pathname// + location.search
-}
-
-function formatPageImage(image, canonicalUrl) {
-    if (image)
-        return image
-    if (metaProps.imageEndpoint)
-        return metaProps.imageEndpoint + canonicalUrl.replace(metaProps.origin, '')
-    return metaProps.image
-}
-
-let pageMeta = {}
-
-const tagReplacerPipeline = [
-    generateCanonicalLink,
-    generateDescriptionMeta,
-    generateOpenGraphMeta,
-    generateLdJsonSchema
-] // generateItemPropSchema
-
-/**
- * Update page metadata tags
- * @param {PageMeta} meta - Page metadata
- */
-function setPageMetadata(meta) {
-    if (isEqual(pageMeta, meta))
-        return
-    //generate canonical URL
-    const canonicalUrl = formatCanonicalUrl()
-    document.title = formatPageTitle(meta.title)
-    for (const replacer of tagReplacerPipeline) {
-        replaceMetaTags(replacer(meta, canonicalUrl))
-    }
-    if (meta.customMeta) {
-        replaceMetaTags(meta.customMeta)
-    }
-    pageMeta = meta
-}
-
-/**
- * Reset page metadata tags to their default values
- * @param {PageMeta} meta - Page metadata
- */
-function resetPageMetadata(meta) {
-    setPageMetadata({
-        title: metaProps.serviceTitle,
-        description: metaProps.description,
-        image: metaProps.image
-    })
-    //TODO: add logic to cleanup custom page meta tags on page unload
-}
-
-/**
- * React hook for setting page metadata
- * @param {PageMeta} meta - Page metadata
- */
-export function usePageMetadata(meta) {
-    useEffect(() => {
-        setPageMetadata(meta)
-        return () => resetPageMetadata(meta)
-    }, [JSON.stringify(meta), [formatCanonicalUrl()]])
-}
-
-export function setPageNoIndex(noIndex) {
-    if (!noIndex) {
-        removeTag('meta[name=robots]')
-    } else {
-        replaceMetaTags({
-            locator: 'name',
-            tags: [
-                {name: 'robots', content: 'noindex,nofollow'}
-            ]
-        })
-    }
-}
-
-/**
- * @typedef {Object} PageMeta
- * @property {String} title - Page title
- * @property {String} description - Contents description
- * @property {String} [image] - Page image url
- * @property {MetaTagReplacement} [customMeta] - Custom metadata tags
- */
-
-/**
- * @typedef {Object} MetaTagReplacement
- * @property {String} [tag] - Tag name to search for ("meta" by default)
- * @property {String} locator - Tag attribute to match
- * @property {{name: String, content: String, [attribute]: String}[]} tags - Tag properties to set
+import {useEffect} from 'react'
+import isEqual from 'react-fast-compare'
+
+const metaProps = {
+    serviceTitle: '',
+    description: '',
+    image: '',
+    imageEndpoint: '',
+    origin: '',
+    domain: ''
+}
+
+setOrigin(window.location.origin)
+
+/**
+ * Initialize default meta properties for the application
+ * @param {{serviceTitle: string, description: string, origin: string, [image]: string, [imageEndpoint]: string}} appMetaProps
+ */
+export function initMeta(appMetaProps) {
+    const {origin, ...props} = appMetaProps
+    Object.assign(metaProps, props)
+    if (origin) {
+        setOrigin(origin)
+    }
+}
+
+function setOrigin(origin) {
+    metaProps.origin = origin
+    metaProps.domain = origin.replace(/https?:\/\//, '')
+}
+
+function formatPageTitle(title) {
+    if (!title)
+        return metaProps.serviceTitle
+    if (title.includes(metaProps.serviceTitle))
+        return title
+    return `${title} ${metaProps.serviceTitle}`
+}
+
+function generateCanonicalLink(params, canonicalUrl) {
+    return {
+        tag: 'link',
+        locator: 'rel',
+        tags: [
+            {name: 'canonical', content: canonicalUrl, attribute: 'href'}
+        ]
+    }
+}
+
+function generateDescriptionMeta({description}) {
+    return {
+        locator: 'name',
+        tags: [
+            {name: 'description', content: description || metaProps.description}
+        ]
+    }
+}
+
+function generateOpenGraphMeta({description, title, image}, canonicalUrl) {
+    //imageEndpoint
+    return {
+        locator: 'property',
+        tags: [
+            {name: 'og:title', content: formatPageTitle(title)},
+            {name: 'og:url', content: canonicalUrl},
+            {name: 'og:site_name', content: formatPageTitle(metaProps.serviceTitle)},
+            {name: 'og:description', content: description || metaProps.description},
+            {name: 'og:type', content: 'website'},
+            {name: 'og:image:width', content: 1200},
+            {name: 'og:image:height', content: 630},
+            {name: 'og:image', content: formatPageImage(image, canonicalUrl)}
+        ]
+    }
+}
+
+function generateItemPropSchema({description, title, image}) {
+    return {
+        locator: 'itemprop',
+        tags: [
+            {name: 'name', content: title},
+            {name: 'description', content: description || metaProps.description},
+            {name: 'image', content: image || metaProps.image}
+        ]
+    }
+}
+
+function generateLdJsonSchema({title, description, image}, canonicalUrl) {
+    return {
+        tag: 'script',
+        locator: 'type',
+        tags: [
+            {
+                name: 'application/ld+json',
+                content: JSON.stringify({
+                    '@context': 'http://schema.org',
+                    '@type': 'WebPage',
+                    name: formatPageTitle(title),
+                    description: description || metaProps.description,
+                    url: canonicalUrl,
+                    thumbnailUrl: formatPageImage(image, canonicalUrl),
+                    publisher: {
+                        '@type': 'ProfilePage',
+                        name: metaProps.serviceTitle
+                    }
+                })
+            }
+        ]
+    }
+}
+
+/**
+ * Replace or create HTML meta tags in the document head
+ * @param {MetaTagReplacement} replacement
+ */
+function replaceMetaTags(replacement) {
+    const {tag, tags, locator} = replacement
+    const selector = tag || 'meta'
+    tags.forEach(tagSettings => {
+        let tag = document.querySelector(`${selector}[${locator}="${tagSettings.name}"]`)
+        if (!tag) {
+            tag = createTag(selector)
+            tag.setAttribute(locator, tagSettings.name)
+        }
+        if (selector === 'meta') {
+            tag.content = tagSettings.content
+        } else if (tagSettings.attribute) {
+            tag[tagSettings.attribute] = tagSettings.content
+        } else {
+            tag.innerText = tagSettings.content
+        }
+    })
+}
+
+function createTag(tagName, props) {
+    let tag = document.createElement(tagName)
+    for (let key in props) {
+        tag[key] = props[key]
+    }
+    document.head.appendChild(tag)
+    return tag
+}
+
+function removeTag(selector) {
+    let tag = document.querySelector(selector)
+    if (tag) {
+        tag.parentElement.removeChild(tag)
+    }
+}
+
+function formatCanonicalUrl() {
+    return metaProps.origin + window.location.pathname// + location.search
+}
+
+function formatPageImage(image, canonicalUrl) {
+    if (image)
+        return image
+    if (metaProps.imageEndpoint)
+        return metaProps.imageEndpoint + canonicalUrl.replace(metaProps.origin, '')
+    return metaProps.image
+}
+
+let pageMeta = {}
+
+const tagReplacerPipeline = [
+    generateCanonicalLink,
+    generateDescriptionMeta,
+    generateOpenGraphMeta,
+    generateLdJsonSchema
+] // generateItemPropSchema
+
+/**
+ * Update page metadata tags
+ * @param {PageMeta} meta - Page metadata
+ */
+function setPageMetadata(meta) {
+    if (isEqual(pageMeta, meta))
+        return
+    //generate canonical URL
+    const canonicalUrl = formatCanonicalUrl()
+    document.title = formatPageTitle(meta.title)
+    for (const replacer of tagReplacerPipeline) {
+        replaceMetaTags(replacer(meta, canonicalUrl))
+    }
+    if (meta.customMeta) {
+        replaceMetaTags(meta.customMeta)
+    }
+    pageMeta = meta
+}
+
+/**
+ * Reset page metadata tags to their default values
+ * @param {PageMeta} meta - Page metadata
+ */
+function resetPageMetadata(meta) {
+    setPageMetadata({
+        title: metaProps.serviceTitle,
+        description: metaProps.description,
+        image: metaProps.image
+    })
+    //TODO: add logic to cleanup custom page meta tags on page unload
+}
+
+/**
+ * React hook for setting page metadata
+ * @param {PageMeta} meta - Page metadata
+ */
+export function usePageMetadata(meta) {
+    useEffect(() => {
+        setPageMetadata(meta)
+        return () => resetPageMetadata(meta)
+    }, [JSON.stringify(meta), [formatCanonicalUrl()]])
+}
+
+/**
+ * Set or remove the robots "noindex,nofollow" meta tag
+ * @param {boolean} noIndex - Whether to add (true) or remove (false) the noindex directive
+ */
+export function setPageNoIndex(noIndex) {
+    if (!noIndex) {
+        removeTag('meta[name=robots]')
+    } else {
+        replaceMetaTags({
+            locator: 'name',
+            tags: [
+                {name: 'robots', content: 'noindex,nofollow'}
+            ]
+        })
+    }
+}
+
+/**
+ * @typedef {Object} PageMeta
+ * @property {string} title - Page title
+ * @property {string} description - Contents description
+ * @property {string} [image] - Page image url
+ * @property {MetaTagReplacement} [customMeta] - Custom metadata tags
+ */
+
+/**
+ * @typedef {Object} MetaTagReplacement
+ * @property {string} [tag] - Tag name to search for ("meta" by default)
+ * @property {string} locator - Tag attribute to match
+ * @property {{name: string, content: string, [attribute]: string}[]} tags - Tag properties to set
  */

package/module/dynamic-module.js

@@ -1,48 +1,48 @@
-import React, {useEffect, useState} from 'react'
-import PropTypes from 'prop-types'
-import {withErrorBoundary} from '../errors/error-boundary'
-
-const loadedModules = new Map()
-
-export const DynamicModule = withErrorBoundary(
-    /**
-     * Dynamically loadable module
-     * @param {Function} load - Dynamic load function, e.g. ()=>import('./dynamic_module_import')
-     * @param {String} module - Module unique name for aching purpose
-     * @param {*} [otherProps]
-     * @constructor
-     */
-    function DynamicModule({load, module, ...otherProps}) {
-        const [error, setError] = useState(undefined)
-        const key = module || load
-
-        useEffect(() => {
-            if (loadedModules.get(key))
-                return //skip if module is already loaded
-            load()
-                .then(dynamicModule => {
-                    //use default export for ES modules or top-level export for CJS
-                    if (dynamicModule.__esModule) {
-                        dynamicModule = dynamicModule.default
-                    }
-                    //add to cache
-                    loadedModules.set(key, dynamicModule)
-                    setError(null)
-                })
-                .catch(error => {
-                    error.message = 'Failed to load module. ' + error.message
-                    setError(error)
-                })
-        }, [module || load])
-        if (error)
-            throw error
-        const resolvedModule = loadedModules.get(key)
-        if (!resolvedModule)
-            return <div className="loader"/>
-        return React.createElement(resolvedModule, otherProps)
-    })
-
-DynamicModule.propTypes = {
-    load: PropTypes.func.isRequired,
-    module: PropTypes.string
+import React, {useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import {withErrorBoundary} from '../errors/error-boundary'
+
+const loadedModules = new Map()
+
+export const DynamicModule = withErrorBoundary(
+    /**
+     * Dynamically loadable module
+     * @param {function} load - Dynamic load function, e.g. ()=>import('./dynamic_module_import')
+     * @param {string} module - Module unique name for aching purpose
+     * @param {*} [otherProps]
+     * @constructor
+     */
+    function DynamicModule({load, module, ...otherProps}) {
+        const [error, setError] = useState(undefined)
+        const key = module || load
+
+        useEffect(() => {
+            if (loadedModules.get(key))
+                return //skip if module is already loaded
+            load()
+                .then(dynamicModule => {
+                    //use default export for ES modules or top-level export for CJS
+                    if (dynamicModule.__esModule) {
+                        dynamicModule = dynamicModule.default
+                    }
+                    //add to cache
+                    loadedModules.set(key, dynamicModule)
+                    setError(null)
+                })
+                .catch(error => {
+                    error.message = 'Failed to load module. ' + error.message
+                    setError(error)
+                })
+        }, [module || load])
+        if (error)
+            throw error
+        const resolvedModule = loadedModules.get(key)
+        if (!resolvedModule)
+            return <div className="loader"/>
+        return React.createElement(resolvedModule, otherProps)
+    })
+
+DynamicModule.propTypes = {
+    load: PropTypes.func.isRequired,
+    module: PropTypes.string
 }

package/package.json

@@ -1,40 +1,41 @@
-{
-  "name": "@stellar-expert/ui-framework",
-  "version": "1.16.8",
-  "description": "StellarExpert shared UI components library",
-  "main": "index.js",
-  "module": "./index.js",
-  "sideEffects": [
-    "*.scss"
-  ],
-  "keywords": [
-    "StellarExpert",
-    "UI"
-  ],
-  "author": "orbitlens <orbit@stellar.expert>",
-  "license": "MIT",
-  "peerDependencies": {
-    "@stellar/stellar-base": "^14.0.0",
-    "@stellar/stellar-sdk": "^14.0.0",
-    "@stellar-expert/asset-descriptor": "^1.5.0",
-    "@stellar-expert/claimable-balance-utils": "^1.4.1",
-    "@stellar-expert/client-cache": "^1.1.0",
-    "@stellar-expert/contract-wasm-interface-parser": "^3.2.0",
-    "@stellar-expert/formatter": "^3.0.0",
-    "@stellar-expert/navigation": "^1.1.0",
-    "@stellar-expert/tx-meta-effects-parser": "^8.3.3",
-    "classnames": ">=2",
-    "prop-types": ">=15",
-    "qrcode.react": "^4.2.0",
-    "react": ">=17",
-    "react-dom": ">=17",
-    "react-fast-compare": ">=3",
-    "throttle-debounce": ">=5.0.0"
-  },
-  "dependencies": {
-    "highlight.js": "^11.8.0",
-    "history": "^4.10.1",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-timeago": "^7.2.0"
-  }
-}
+{
+  "name": "@stellar-expert/ui-framework",
+  "version": "1.17.0",
+  "description": "StellarExpert shared UI components library",
+  "main": "index.js",
+  "module": "./index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "*.scss"
+  ],
+  "keywords": [
+    "StellarExpert",
+    "UI"
+  ],
+  "author": "orbitlens <orbit@stellar.expert>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@stellar/stellar-base": "^14.0.0",
+    "@stellar/stellar-sdk": "^14.0.0",
+    "@stellar-expert/asset-descriptor": "^1.5.0",
+    "@stellar-expert/claimable-balance-utils": "^1.4.1",
+    "@stellar-expert/client-cache": "^1.1.0",
+    "@stellar-expert/contract-wasm-interface-parser": "^4.0.0",
+    "@stellar-expert/formatter": "^3.0.0",
+    "@stellar-expert/navigation": "^1.1.0",
+    "@stellar-expert/tx-meta-effects-parser": "^8.3.3",
+    "classnames": ">=2",
+    "prop-types": ">=15",
+    "qrcode.react": "^4.2.0",
+    "react": ">=17",
+    "react-dom": ">=17",
+    "react-fast-compare": ">=3",
+    "throttle-debounce": ">=5.0.0"
+  },
+  "dependencies": {
+    "highlight.js": "^11.8.0",
+    "history": "^4.10.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-timeago": "^7.2.0"
+  }
+}