@vaadin/common-frontend 0.0.19 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ConnectionIndicator.d.ts +21 -35
- package/ConnectionIndicator.d.ts.map +1 -1
- package/ConnectionIndicator.js +293 -268
- package/ConnectionIndicator.js.map +7 -1
- package/ConnectionState.d.ts +3 -7
- package/ConnectionState.d.ts.map +1 -1
- package/ConnectionState.js +100 -129
- package/ConnectionState.js.map +7 -1
- package/README.md +2 -2
- package/index.js +11 -12
- package/index.js.map +7 -1
- package/package.json +24 -20
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectionIndicator.js","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright 2000-2020 Vaadin Ltd.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not\n * use this file except in compliance with the License. You may obtain a copy of\n * the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ConnectionState, type ConnectionStateStore } from './ConnectionState.js';\n\nconst DEFAULT_STYLE_ID = 'css-loading-indicator';\n\n/**\n * The loading indicator states\n */\nexport const enum LoadingBarState {\n IDLE = '',\n FIRST = 'first',\n SECOND = 'second',\n THIRD = 'third',\n}\n\n/**\n * Component showing loading and connection indicator. When added to DOM,\n * listens for changes on `window.Vaadin.connectionState` ConnectionStateStore.\n */\nexport class ConnectionIndicator extends LitElement {\n /**\n * Initialize global connection indicator instance at\n * window.Vaadin.connectionIndicator and add instance to the document body.\n */\n static create(): ConnectionIndicator {\n const $wnd = window as any;\n if (!$wnd.Vaadin?.connectionIndicator) {\n $wnd.Vaadin ||= {};\n $wnd.Vaadin.connectionIndicator = document.createElement('vaadin-connection-indicator');\n document.body.appendChild($wnd.Vaadin.connectionIndicator);\n }\n return $wnd.Vaadin?.connectionIndicator as ConnectionIndicator;\n }\n\n /**\n * The delay before showing the loading indicator, in ms.\n */\n @property({ type: Number })\n firstDelay = 450;\n\n /**\n * The delay before the loading indicator goes into \"second\" state, in ms.\n */\n @property({ type: Number })\n secondDelay = 1500;\n\n /**\n * The delay before the loading indicator goes into \"third\" state, in ms.\n */\n @property({ type: Number })\n thirdDelay = 5000;\n\n /**\n * The duration for which the connection state change message is visible,\n * in ms.\n */\n @property({ type: Number })\n expandedDuration = 2000;\n\n /**\n * The message shown when the connection goes to connected state.\n */\n @property({ type: String })\n onlineText = 'Online';\n\n /**\n * The message shown when the connection goes to lost state.\n */\n @property({ type: String })\n offlineText = 'Connection lost';\n\n /**\n * The message shown when the connection goes to reconnecting state.\n */\n @property({ type: String })\n reconnectingText = 'Connection lost, trying to reconnect...';\n\n @property({ type: Boolean, reflect: true })\n private offline = false;\n\n @property({ type: Boolean, reflect: true })\n private reconnecting = false;\n\n @property({ type: Boolean, reflect: true })\n private expanded = false;\n\n @property({ type: Boolean, reflect: true })\n private loading = false;\n\n @property({ type: String })\n private loadingBarState: LoadingBarState = LoadingBarState.IDLE;\n\n private applyDefaultThemeState = true;\n\n private firstTimeout = 0;\n\n private secondTimeout = 0;\n\n private thirdTimeout = 0;\n\n private expandedTimeout = 0;\n\n private connectionStateStore?: ConnectionStateStore;\n\n private readonly connectionStateListener: () => void;\n\n private lastMessageState: ConnectionState = ConnectionState.CONNECTED;\n\n constructor() {\n super();\n\n this.connectionStateListener = () => {\n this.expanded = this.updateConnectionState();\n this.expandedTimeout = this.timeoutFor(\n this.expandedTimeout,\n this.expanded,\n () => {\n this.expanded = false;\n },\n this.expandedDuration,\n );\n };\n }\n\n protected render() {\n return html`\n <div class=\"v-loading-indicator ${this.loadingBarState}\" style=${this.getLoadingBarStyle()}></div>\n\n <div\n class=\"v-status-message ${classMap({\n active: this.reconnecting,\n })}\"\n >\n <span class=\"text\"> ${this.renderMessage()} </span>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const $wnd = window as any;\n if ($wnd.Vaadin?.connectionState) {\n this.connectionStateStore = $wnd.Vaadin.connectionState as ConnectionStateStore;\n this.connectionStateStore.addStateChangeListener(this.connectionStateListener);\n this.updateConnectionState();\n }\n\n this.updateTheme();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.connectionStateStore) {\n this.connectionStateStore.removeStateChangeListener(this.connectionStateListener);\n }\n\n this.updateTheme();\n }\n\n @property({ type: Boolean })\n get applyDefaultTheme() {\n return this.applyDefaultThemeState;\n }\n\n set applyDefaultTheme(applyDefaultTheme: boolean) {\n if (applyDefaultTheme !== this.applyDefaultThemeState) {\n this.applyDefaultThemeState = applyDefaultTheme;\n this.updateTheme();\n }\n }\n\n protected createRenderRoot() {\n return this;\n }\n\n /**\n * Update state flags.\n *\n * @returns true if the connection message changes, and therefore a new\n * message should be shown\n */\n private updateConnectionState(): boolean {\n const state = this.connectionStateStore?.state;\n this.offline = state === ConnectionState.CONNECTION_LOST;\n this.reconnecting = state === ConnectionState.RECONNECTING;\n this.updateLoading(state === ConnectionState.LOADING);\n if (this.loading) {\n // Entering loading state, do not show message\n return false;\n }\n\n if (state !== this.lastMessageState) {\n this.lastMessageState = state!;\n // Message changes, show new message\n return true;\n }\n\n // Message did not change\n return false;\n }\n\n private updateLoading(loading: boolean) {\n this.loading = loading;\n this.loadingBarState = LoadingBarState.IDLE;\n\n this.firstTimeout = this.timeoutFor(\n this.firstTimeout,\n loading,\n () => {\n this.loadingBarState = LoadingBarState.FIRST;\n },\n this.firstDelay,\n );\n\n this.secondTimeout = this.timeoutFor(\n this.secondTimeout,\n loading,\n () => {\n this.loadingBarState = LoadingBarState.SECOND;\n },\n this.secondDelay,\n );\n\n this.thirdTimeout = this.timeoutFor(\n this.thirdTimeout,\n loading,\n () => {\n this.loadingBarState = LoadingBarState.THIRD;\n },\n this.thirdDelay,\n );\n }\n\n private renderMessage() {\n if (this.reconnecting) {\n return this.reconnectingText;\n }\n\n if (this.offline) {\n return this.offlineText;\n }\n\n return this.onlineText;\n }\n\n private updateTheme() {\n if (this.applyDefaultThemeState && this.isConnected) {\n if (!document.getElementById(DEFAULT_STYLE_ID)) {\n const style = document.createElement('style');\n style.id = DEFAULT_STYLE_ID;\n style.textContent = this.getDefaultStyle();\n document.head.appendChild(style);\n }\n } else {\n const style = document.getElementById(DEFAULT_STYLE_ID);\n if (style) {\n document.head.removeChild(style);\n }\n }\n }\n\n private getDefaultStyle(): string {\n return `\n @keyframes v-progress-start {\n 0% {\n width: 0%;\n }\n 100% {\n width: 50%;\n }\n }\n @keyframes v-progress-delay {\n 0% {\n width: 50%;\n }\n 100% {\n width: 90%;\n }\n }\n @keyframes v-progress-wait {\n 0% {\n width: 90%;\n height: 4px;\n }\n 3% {\n width: 91%;\n height: 7px;\n }\n 100% {\n width: 96%;\n height: 7px;\n }\n }\n @keyframes v-progress-wait-pulse {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.1;\n }\n 100% {\n opacity: 1;\n }\n }\n .v-loading-indicator,\n .v-status-message {\n position: fixed;\n z-index: 251;\n left: 0;\n right: auto;\n top: 0;\n background-color: var(--lumo-primary-color, var(--material-primary-color, blue));\n transition: none;\n }\n .v-loading-indicator {\n width: 50%;\n height: 4px;\n opacity: 1;\n pointer-events: none;\n animation: v-progress-start 1000ms 200ms both;\n }\n .v-loading-indicator[style*='none'] {\n display: block !important;\n width: 100%;\n opacity: 0;\n animation: none;\n transition: opacity 500ms 300ms, width 300ms;\n }\n .v-loading-indicator.second {\n width: 90%;\n animation: v-progress-delay 3.8s forwards;\n }\n .v-loading-indicator.third {\n width: 96%;\n animation: v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards;\n }\n\n vaadin-connection-indicator[offline] .v-loading-indicator,\n vaadin-connection-indicator[reconnecting] .v-loading-indicator {\n display: none;\n }\n\n .v-status-message {\n opacity: 0;\n width: 100%;\n max-height: var(--status-height-collapsed, 8px);\n overflow: hidden;\n background-color: var(--status-bg-color-online, var(--lumo-primary-color, var(--material-primary-color, blue)));\n color: var(\n --status-text-color-online,\n var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))\n );\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n transition: all 0.5s;\n padding: 0 0.5em;\n }\n\n vaadin-connection-indicator[offline] .v-status-message,\n vaadin-connection-indicator[reconnecting] .v-status-message {\n opacity: 1;\n background-color: var(--status-bg-color-offline, var(--lumo-shade, #333));\n color: var(\n --status-text-color-offline,\n var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))\n );\n background-image: repeating-linear-gradient(\n 45deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0) 10px,\n rgba(255, 255, 255, 0.1) 10px,\n rgba(255, 255, 255, 0.1) 20px\n );\n }\n\n vaadin-connection-indicator[reconnecting] .v-status-message {\n animation: show-reconnecting-status 2s;\n }\n\n vaadin-connection-indicator[offline] .v-status-message:hover,\n vaadin-connection-indicator[reconnecting] .v-status-message:hover,\n vaadin-connection-indicator[expanded] .v-status-message {\n max-height: var(--status-height, 1.75rem);\n }\n\n vaadin-connection-indicator[expanded] .v-status-message {\n opacity: 1;\n }\n\n .v-status-message span {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--status-height, 1.75rem);\n }\n\n vaadin-connection-indicator[reconnecting] .v-status-message span::before {\n content: '';\n width: 1em;\n height: 1em;\n border-top: 2px solid\n var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));\n border-left: 2px solid\n var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n border-radius: 50%;\n box-sizing: border-box;\n animation: v-spin 0.4s linear infinite;\n margin: 0 0.5em;\n }\n\n @keyframes v-spin {\n 100% {\n transform: rotate(360deg);\n }\n }\n `;\n }\n\n private getLoadingBarStyle(): string {\n switch (this.loadingBarState) {\n case LoadingBarState.IDLE:\n return 'display: none';\n case LoadingBarState.FIRST:\n case LoadingBarState.SECOND:\n case LoadingBarState.THIRD:\n return 'display: block';\n default:\n return '';\n }\n }\n\n private timeoutFor(timeoutId: number, enabled: boolean, handler: () => void, delay: number): number {\n if (timeoutId !== 0) {\n window.clearTimeout(timeoutId);\n }\n\n return enabled ? window.setTimeout(handler, delay) : 0;\n }\n\n static get instance(): ConnectionIndicator {\n return ConnectionIndicator.create();\n }\n}\n\nif (customElements.get('vaadin-connection-indicator') === undefined) {\n customElements.define('vaadin-connection-indicator', ConnectionIndicator);\n}\n\n/**\n * The global connection indicator object. Its appearance and behavior can be\n * configured via properties:\n *\n * connectionIndicator.firstDelay = 0;\n * connectionIndicator.onlineText = 'The application is online';\n *\n * To avoid altering the appearance while the indicator is active, apply the\n * configuration in your application 'frontend/index.ts' file.\n */\nexport const connectionIndicator = ConnectionIndicator.instance;\n"]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["src/ConnectionIndicator.ts"],
|
|
4
|
+
"sourcesContent": ["/*\n * Copyright 2000-2025 Vaadin Ltd.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not\n * use this file except in compliance with the License. You may obtain a copy of\n * the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ConnectionState, type ConnectionStateStore } from './ConnectionState.js';\n\nconst DEFAULT_STYLE_ID = 'css-loading-indicator';\n\n/**\n * The loading indicator states\n */\nexport const enum LoadingBarState {\n IDLE = '',\n FIRST = 'first',\n SECOND = 'second',\n THIRD = 'third',\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vaadin-connection-indicator': ConnectionIndicator;\n }\n}\n\n/**\n * Component showing loading and connection indicator. When added to DOM,\n * listens for changes on `window.Vaadin.connectionState` ConnectionStateStore.\n */\nexport class ConnectionIndicator extends LitElement {\n static get instance(): ConnectionIndicator {\n return ConnectionIndicator.create();\n }\n\n /**\n * Initialize global connection indicator instance at\n * window.Vaadin.connectionIndicator and add instance to the document body.\n */\n static create(): ConnectionIndicator {\n const $wnd = window as any;\n if (!$wnd.Vaadin?.connectionIndicator) {\n $wnd.Vaadin ??= {};\n $wnd.Vaadin.connectionIndicator = document.createElement('vaadin-connection-indicator');\n document.body.appendChild($wnd.Vaadin.connectionIndicator);\n }\n return $wnd.Vaadin?.connectionIndicator as ConnectionIndicator;\n }\n\n /**\n * The delay before showing the loading indicator, in ms.\n */\n @property({ type: Number })\n accessor firstDelay = 450;\n\n /**\n * The delay before the loading indicator goes into \"second\" state, in ms.\n */\n @property({ type: Number })\n accessor secondDelay = 1500;\n\n /**\n * The delay before the loading indicator goes into \"third\" state, in ms.\n */\n @property({ type: Number })\n accessor thirdDelay = 5000;\n\n /**\n * The duration for which the connection state change message is visible,\n * in ms.\n */\n @property({ type: Number })\n accessor expandedDuration = 2000;\n\n /**\n * The message shown when the connection goes to connected state.\n */\n @property({ type: String })\n accessor onlineText = 'Online';\n\n /**\n * The message shown when the connection goes to lost state.\n */\n @property({ type: String })\n accessor offlineText = 'Connection lost';\n\n /**\n * The message shown when the connection goes to reconnecting state.\n */\n @property({ type: String })\n accessor reconnectingText = 'Connection lost, trying to reconnect...';\n\n @property({ type: Boolean, reflect: true })\n accessor offline = false;\n\n @property({ type: Boolean, reflect: true })\n accessor reconnecting = false;\n\n @property({ type: Boolean, reflect: true })\n accessor expanded = false;\n\n @property({ type: Boolean, reflect: true })\n accessor loading = false;\n\n @state()\n accessor #loadingBarState: LoadingBarState = LoadingBarState.IDLE;\n\n accessor #isPopover: boolean = false;\n\n #applyDefaultThemeState = true;\n\n #firstTimeout = 0;\n\n #secondTimeout = 0;\n\n #thirdTimeout = 0;\n\n #expandedTimeout = 0;\n\n #connectionStateStore?: ConnectionStateStore;\n\n readonly connectionStateListener: () => void;\n\n #lastMessageState: ConnectionState = ConnectionState.CONNECTED;\n\n constructor() {\n super();\n\n this.connectionStateListener = () => {\n this.expanded = this.#updateConnectionState();\n this.#expandedTimeout = this.#timeoutFor(\n this.#expandedTimeout,\n this.expanded,\n () => {\n this.expanded = false;\n },\n this.expandedDuration,\n );\n };\n }\n\n protected override render() {\n return html`\n <div class=\"v-loading-indicator ${this.#loadingBarState}\" style=${this.#getLoadingBarStyle()}></div>\n\n <div\n class=\"v-status-message ${classMap({\n active: this.reconnecting,\n })}\"\n >\n <span class=\"text\"> ${this.#renderMessage()} </span>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#initPopover();\n\n const $wnd = window as any;\n if ($wnd.Vaadin?.connectionState) {\n this.#connectionStateStore = $wnd.Vaadin.connectionState as ConnectionStateStore;\n this.#connectionStateStore.addStateChangeListener(this.connectionStateListener);\n this.#updateConnectionState();\n }\n\n this.#updateTheme();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.#connectionStateStore) {\n this.#connectionStateStore.removeStateChangeListener(this.connectionStateListener);\n }\n\n this.#updateTheme();\n this.#isPopover = false;\n }\n\n protected override updated(props: PropertyValues): void {\n if (['loading', 'offline', 'reconnecting', 'expanded'].some((p) => props.has(p))) {\n this.#updatePopoverState();\n }\n }\n\n get applyDefaultTheme() {\n return this.#applyDefaultThemeState;\n }\n\n @property({ type: Boolean, reflect: true })\n set applyDefaultTheme(applyDefaultTheme: boolean) {\n if (applyDefaultTheme !== this.#applyDefaultThemeState) {\n this.#applyDefaultThemeState = applyDefaultTheme;\n this.#updateTheme();\n }\n }\n\n protected override createRenderRoot() {\n return this;\n }\n\n #initPopover() {\n // Allow showing the indicator as popover\n this.setAttribute('popover', 'manual');\n // Override user agent styles for popover\n this.style.display = 'contents';\n }\n\n /**\n * Update state flags.\n *\n * @returns true if the connection message changes, and therefore a new\n * message should be shown\n */\n #updateConnectionState(): boolean {\n const connectionState = this.#connectionStateStore?.state;\n this.offline = connectionState === ConnectionState.CONNECTION_LOST;\n this.reconnecting = connectionState === ConnectionState.RECONNECTING;\n this.#updateLoading(connectionState === ConnectionState.LOADING);\n if (this.loading) {\n // Entering loading state, do not show message\n return false;\n }\n\n if (connectionState !== this.#lastMessageState) {\n this.#lastMessageState = connectionState!;\n // Message changes, show new message\n return true;\n }\n\n // Message did not change\n return false;\n }\n\n #updateLoading(loading: boolean) {\n this.loading = loading;\n this.#loadingBarState = LoadingBarState.IDLE;\n\n this.#firstTimeout = this.#timeoutFor(\n this.#firstTimeout,\n loading,\n () => {\n this.#loadingBarState = LoadingBarState.FIRST;\n },\n this.firstDelay,\n );\n\n this.#secondTimeout = this.#timeoutFor(\n this.#secondTimeout,\n loading,\n () => {\n this.#loadingBarState = LoadingBarState.SECOND;\n },\n this.secondDelay,\n );\n\n this.#thirdTimeout = this.#timeoutFor(\n this.#thirdTimeout,\n loading,\n () => {\n this.#loadingBarState = LoadingBarState.THIRD;\n },\n this.thirdDelay,\n );\n }\n\n #updatePopoverState() {\n const showPopover = this.loading || this.offline || this.reconnecting || this.expanded;\n\n // Always close the popover first on state changes. This way, on every state change,\n // showPopover is called again, resulting in the connection indicator being shown on\n // top of other popovers that might have been added, for example after a reconnect.\n if (this.#isPopover) {\n this.hidePopover();\n }\n if (showPopover) {\n this.showPopover();\n }\n this.#isPopover = showPopover;\n }\n\n #renderMessage() {\n if (this.reconnecting) {\n return this.reconnectingText;\n }\n\n if (this.offline) {\n return this.offlineText;\n }\n\n return this.onlineText;\n }\n\n #updateTheme() {\n if (this.#applyDefaultThemeState && this.isConnected) {\n if (!document.getElementById(DEFAULT_STYLE_ID)) {\n const style = document.createElement('style');\n style.id = DEFAULT_STYLE_ID;\n style.textContent = this.#getDefaultStyle();\n document.head.appendChild(style);\n }\n } else {\n const style = document.getElementById(DEFAULT_STYLE_ID);\n if (style) {\n document.head.removeChild(style);\n }\n }\n }\n\n #getDefaultStyle(): string {\n return `\n @keyframes v-progress-start {\n 0% {\n width: 0%;\n }\n 100% {\n width: 50%;\n }\n }\n @keyframes v-progress-delay {\n 0% {\n width: 50%;\n }\n 100% {\n width: 90%;\n }\n }\n @keyframes v-progress-wait {\n 0% {\n width: 90%;\n height: 4px;\n }\n 3% {\n width: 91%;\n height: 7px;\n }\n 100% {\n width: 96%;\n height: 7px;\n }\n }\n @keyframes v-progress-wait-pulse {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.1;\n }\n 100% {\n opacity: 1;\n }\n }\n .v-loading-indicator,\n .v-status-message {\n position: fixed;\n left: 0;\n right: auto;\n top: 0;\n background-color: var(--lumo-primary-color, var(--material-primary-color, blue));\n transition: none;\n }\n .v-loading-indicator {\n width: 50%;\n height: 4px;\n opacity: 1;\n pointer-events: none;\n animation: v-progress-start 1000ms 200ms both;\n }\n .v-loading-indicator[style*='none'] {\n display: block !important;\n width: 100%;\n opacity: 0;\n animation: none;\n transition: opacity 500ms 300ms, width 300ms;\n }\n .v-loading-indicator.second {\n width: 90%;\n animation: v-progress-delay 3.8s forwards;\n }\n .v-loading-indicator.third {\n width: 96%;\n animation: v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards;\n }\n\n vaadin-connection-indicator[offline] .v-loading-indicator,\n vaadin-connection-indicator[reconnecting] .v-loading-indicator {\n display: none;\n }\n\n .v-status-message {\n opacity: 0;\n pointer-events: none;\n width: 100%;\n max-height: var(--status-height-collapsed, 8px);\n overflow: hidden;\n background-color: var(--status-bg-color-online, var(--lumo-primary-color, var(--material-primary-color, blue)));\n color: var(\n --status-text-color-online,\n var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))\n );\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n transition: all 0.5s;\n padding: 0 0.5em;\n }\n\n vaadin-connection-indicator[offline] .v-status-message,\n vaadin-connection-indicator[reconnecting] .v-status-message {\n opacity: 1;\n pointer-events: auto;\n background-color: var(--status-bg-color-offline, var(--lumo-shade, #333));\n color: var(\n --status-text-color-offline,\n var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))\n );\n background-image: repeating-linear-gradient(\n 45deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0) 10px,\n rgba(255, 255, 255, 0.1) 10px,\n rgba(255, 255, 255, 0.1) 20px\n );\n }\n\n vaadin-connection-indicator[reconnecting] .v-status-message {\n animation: show-reconnecting-status 2s;\n }\n\n vaadin-connection-indicator[offline] .v-status-message:hover,\n vaadin-connection-indicator[reconnecting] .v-status-message:hover,\n vaadin-connection-indicator[expanded] .v-status-message {\n max-height: var(--status-height, 1.75rem);\n }\n\n vaadin-connection-indicator[expanded] .v-status-message {\n opacity: 1;\n pointer-events: auto;\n }\n\n .v-status-message span {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--status-height, 1.75rem);\n }\n\n vaadin-connection-indicator[reconnecting] .v-status-message span::before {\n content: '';\n width: 1em;\n height: 1em;\n border-top: 2px solid\n var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));\n border-left: 2px solid\n var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n border-radius: 50%;\n box-sizing: border-box;\n animation: v-spin 0.4s linear infinite;\n margin: 0 0.5em;\n }\n\n @keyframes v-spin {\n 100% {\n transform: rotate(360deg);\n }\n }\n `;\n }\n\n #getLoadingBarStyle(): string {\n switch (this.#loadingBarState) {\n case LoadingBarState.IDLE:\n return 'display: none';\n case LoadingBarState.FIRST:\n case LoadingBarState.SECOND:\n case LoadingBarState.THIRD:\n return 'display: block';\n default:\n return '';\n }\n }\n\n #timeoutFor(timeoutId: number, enabled: boolean, handler: () => void, delay: number): number {\n if (timeoutId !== 0) {\n window.clearTimeout(timeoutId);\n }\n\n return enabled ? window.setTimeout(handler, delay) : 0;\n }\n}\n\nif (customElements.get('vaadin-connection-indicator') === undefined) {\n customElements.define('vaadin-connection-indicator', ConnectionIndicator);\n}\n\n/**\n * The global connection indicator object. Its appearance and behavior can be\n * configured via properties:\n *\n * connectionIndicator.firstDelay = 0;\n * connectionIndicator.onlineText = 'The application is online';\n *\n * To avoid altering the appearance while the indicator is active, apply the\n * configuration in your application 'frontend/index.ts' file.\n */\nexport const connectionIndicator = ConnectionIndicator.instance;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["LoadingBarState"]
|
|
7
|
+
}
|
package/ConnectionState.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export declare enum ConnectionState {
|
|
|
6
6
|
CONNECTED = "connected",
|
|
7
7
|
/**
|
|
8
8
|
* Application is connected and Flow is loading application state from the
|
|
9
|
-
* server, or
|
|
9
|
+
* server, or Hilla is waiting for an endpoint call to return.
|
|
10
10
|
*/
|
|
11
11
|
LOADING = "loading",
|
|
12
12
|
/**
|
|
@@ -26,21 +26,17 @@ export declare enum ConnectionState {
|
|
|
26
26
|
}
|
|
27
27
|
export type ConnectionStateChangeListener = (previous: ConnectionState, current: ConnectionState) => void;
|
|
28
28
|
export declare class ConnectionStateStore {
|
|
29
|
-
private
|
|
30
|
-
private readonly stateChangeListeners;
|
|
31
|
-
private loadingCount;
|
|
29
|
+
#private;
|
|
32
30
|
constructor(initialState: ConnectionState);
|
|
33
31
|
addStateChangeListener(listener: ConnectionStateChangeListener): void;
|
|
34
32
|
removeStateChangeListener(listener: ConnectionStateChangeListener): void;
|
|
35
33
|
loadingStarted(): void;
|
|
36
34
|
loadingFinished(): void;
|
|
37
35
|
loadingFailed(): void;
|
|
38
|
-
private decreaseLoadingCount;
|
|
39
36
|
get state(): ConnectionState;
|
|
40
37
|
set state(newState: ConnectionState);
|
|
41
38
|
get online(): boolean;
|
|
42
39
|
get offline(): boolean;
|
|
43
|
-
private serviceWorkerMessageListener;
|
|
44
40
|
}
|
|
45
|
-
export declare
|
|
41
|
+
export declare function isLocalhost(hostname: string): boolean;
|
|
46
42
|
//# sourceMappingURL=ConnectionState.d.ts.map
|
package/ConnectionState.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectionState.d.ts","sourceRoot":"","sources":["src/ConnectionState.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ConnectionState.d.ts","sourceRoot":"","sources":["src/ConnectionState.ts"],"names":[],"mappings":"AAgBA,oBAAY,eAAe;IACzB;;;OAGG;IACH,SAAS,cAAc;IAEvB;;;OAGG;IACH,OAAO,YAAY;IAEnB;;;;;;OAMG;IACH,YAAY,iBAAiB;IAE7B;;;;OAIG;IACH,eAAe,oBAAoB;CACpC;AAED,MAAM,MAAM,6BAA6B,GAAG,CAAC,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;AAE1G,qBAAa,oBAAoB;;gBAMnB,YAAY,EAAE,eAAe;IAoBzC,sBAAsB,CAAC,QAAQ,EAAE,6BAA6B,GAAG,IAAI;IAIrE,yBAAyB,CAAC,QAAQ,EAAE,6BAA6B,GAAG,IAAI;IAIxE,cAAc,IAAI,IAAI;IAKtB,eAAe,IAAI,IAAI;IAIvB,aAAa,IAAI,IAAI;IAarB,IAAI,KAAK,IAAI,eAAe,CAE3B;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE,eAAe,EASlC;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;CAcF;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAUrD"}
|
package/ConnectionState.js
CHANGED
|
@@ -1,132 +1,103 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
for (const listener of this.stateChangeListeners) {
|
|
85
|
-
listener(prevState, this.connectionState);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
get online() {
|
|
90
|
-
return this.connectionState === ConnectionState.CONNECTED || this.connectionState === ConnectionState.LOADING;
|
|
91
|
-
}
|
|
92
|
-
get offline() {
|
|
93
|
-
return !this.online;
|
|
94
|
-
}
|
|
95
|
-
serviceWorkerMessageListener(event) {
|
|
96
|
-
// Handle JSON-RPC response from service worker
|
|
97
|
-
if (typeof event.data === 'object' && event.data.id === 'Vaadin.ServiceWorker.isConnectionLost') {
|
|
98
|
-
if (event.data.result === true) {
|
|
99
|
-
this.state = ConnectionState.CONNECTION_LOST;
|
|
100
|
-
}
|
|
101
|
-
// Cleanup: remove event listener upon receiving response
|
|
102
|
-
// eslint-disable-next-line @typescript-eslint/unbound-method
|
|
103
|
-
navigator.serviceWorker.removeEventListener('message', this.serviceWorkerMessageListener);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
1
|
+
var ConnectionState = /* @__PURE__ */ ((ConnectionState2) => {
|
|
2
|
+
ConnectionState2["CONNECTED"] = "connected";
|
|
3
|
+
ConnectionState2["LOADING"] = "loading";
|
|
4
|
+
ConnectionState2["RECONNECTING"] = "reconnecting";
|
|
5
|
+
ConnectionState2["CONNECTION_LOST"] = "connection-lost";
|
|
6
|
+
return ConnectionState2;
|
|
7
|
+
})(ConnectionState || {});
|
|
8
|
+
class ConnectionStateStore {
|
|
9
|
+
#stateChangeListeners = /* @__PURE__ */ new Set();
|
|
10
|
+
#connectionState;
|
|
11
|
+
#loadingCount = 0;
|
|
12
|
+
constructor(initialState) {
|
|
13
|
+
this.#connectionState = initialState;
|
|
14
|
+
if (navigator.serviceWorker) {
|
|
15
|
+
navigator.serviceWorker.addEventListener("message", this.#serviceWorkerMessageListener);
|
|
16
|
+
void navigator.serviceWorker.ready.then((registration) => {
|
|
17
|
+
registration.active?.postMessage({
|
|
18
|
+
method: "Vaadin.ServiceWorker.isConnectionLost",
|
|
19
|
+
id: "Vaadin.ServiceWorker.isConnectionLost"
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
addStateChangeListener(listener) {
|
|
25
|
+
this.#stateChangeListeners.add(listener);
|
|
26
|
+
}
|
|
27
|
+
removeStateChangeListener(listener) {
|
|
28
|
+
this.#stateChangeListeners.delete(listener);
|
|
29
|
+
}
|
|
30
|
+
loadingStarted() {
|
|
31
|
+
this.state = "loading" /* LOADING */;
|
|
32
|
+
this.#loadingCount += 1;
|
|
33
|
+
}
|
|
34
|
+
loadingFinished() {
|
|
35
|
+
this.#decreaseLoadingCount("connected" /* CONNECTED */);
|
|
36
|
+
}
|
|
37
|
+
loadingFailed() {
|
|
38
|
+
this.#decreaseLoadingCount("connection-lost" /* CONNECTION_LOST */);
|
|
39
|
+
}
|
|
40
|
+
#decreaseLoadingCount(finalState) {
|
|
41
|
+
if (this.#loadingCount > 0) {
|
|
42
|
+
this.#loadingCount -= 1;
|
|
43
|
+
if (this.#loadingCount === 0) {
|
|
44
|
+
this.state = finalState;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
get state() {
|
|
49
|
+
return this.#connectionState;
|
|
50
|
+
}
|
|
51
|
+
set state(newState) {
|
|
52
|
+
if (newState !== this.#connectionState) {
|
|
53
|
+
const prevState = this.#connectionState;
|
|
54
|
+
this.#connectionState = newState;
|
|
55
|
+
this.#loadingCount = 0;
|
|
56
|
+
for (const listener of this.#stateChangeListeners) {
|
|
57
|
+
listener(prevState, this.#connectionState);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
get online() {
|
|
62
|
+
return this.#connectionState === "connected" /* CONNECTED */ || this.#connectionState === "loading" /* LOADING */;
|
|
63
|
+
}
|
|
64
|
+
get offline() {
|
|
65
|
+
return !this.online;
|
|
66
|
+
}
|
|
67
|
+
#serviceWorkerMessageListener = (event) => {
|
|
68
|
+
if (typeof event.data === "object" && event.data.id === "Vaadin.ServiceWorker.isConnectionLost") {
|
|
69
|
+
if (event.data.result === true) {
|
|
70
|
+
this.state = "connection-lost" /* CONNECTION_LOST */;
|
|
71
|
+
}
|
|
72
|
+
navigator.serviceWorker.removeEventListener("message", this.#serviceWorkerMessageListener);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
function isLocalhost(hostname) {
|
|
77
|
+
if (hostname === "localhost") {
|
|
78
|
+
return true;
|
|
79
|
+
}
|
|
80
|
+
if (hostname === "[::1]") {
|
|
81
|
+
return true;
|
|
82
|
+
}
|
|
83
|
+
return /^127\.\d+\.\d+\.\d+$/u.test(hostname);
|
|
106
84
|
}
|
|
107
|
-
export const isLocalhost = (hostname) => {
|
|
108
|
-
if (hostname === 'localhost') {
|
|
109
|
-
return true;
|
|
110
|
-
}
|
|
111
|
-
if (hostname === '[::1]') {
|
|
112
|
-
return true;
|
|
113
|
-
}
|
|
114
|
-
if (/^127\.\d+\.\d+\.\d+$/u.exec(hostname)) {
|
|
115
|
-
return true;
|
|
116
|
-
}
|
|
117
|
-
return false;
|
|
118
|
-
};
|
|
119
85
|
const $wnd = window;
|
|
120
|
-
if (
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
86
|
+
if (!$wnd.Vaadin?.connectionState) {
|
|
87
|
+
let online;
|
|
88
|
+
if (isLocalhost(window.location.hostname)) {
|
|
89
|
+
online = true;
|
|
90
|
+
} else {
|
|
91
|
+
online = navigator.onLine;
|
|
92
|
+
}
|
|
93
|
+
$wnd.Vaadin ??= {};
|
|
94
|
+
$wnd.Vaadin.connectionState = new ConnectionStateStore(
|
|
95
|
+
online ? "connected" /* CONNECTED */ : "connection-lost" /* CONNECTION_LOST */
|
|
96
|
+
);
|
|
131
97
|
}
|
|
132
|
-
|
|
98
|
+
export {
|
|
99
|
+
ConnectionState,
|
|
100
|
+
ConnectionStateStore,
|
|
101
|
+
isLocalhost
|
|
102
|
+
};
|
|
103
|
+
//# sourceMappingURL=ConnectionState.js.map
|
package/ConnectionState.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["src/ConnectionState.ts"],
|
|
4
|
+
"sourcesContent": ["/*\n * Copyright 2000-2025 Vaadin Ltd.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not\n * use this file except in compliance with the License. You may obtain a copy of\n * the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */\n\nexport enum ConnectionState {\n /**\n * Application is connected to server: last transaction over the wire (XHR /\n * heartbeat / endpoint call) was successful.\n */\n CONNECTED = 'connected',\n\n /**\n * Application is connected and Flow is loading application state from the\n * server, or Hilla is waiting for an endpoint call to return.\n */\n LOADING = 'loading',\n\n /**\n * Application has been temporarily disconnected from the server because the\n * last transaction over the wire (XHR / heartbeat / endpoint call) resulted\n * in a network error, or the browser has received the 'online' event and needs\n * to verify reconnection with the server. Flow is attempting to reconnect\n * a configurable number of times before giving up.\n */\n RECONNECTING = 'reconnecting',\n\n /**\n * Application has been permanently disconnected due to browser receiving the\n * 'offline' event, or the server not being reached after a number of reconnect\n * attempts.\n */\n CONNECTION_LOST = 'connection-lost',\n}\n\nexport type ConnectionStateChangeListener = (previous: ConnectionState, current: ConnectionState) => void;\n\nexport class ConnectionStateStore {\n readonly #stateChangeListeners = new Set<ConnectionStateChangeListener>();\n\n #connectionState: ConnectionState;\n #loadingCount = 0;\n\n constructor(initialState: ConnectionState) {\n this.#connectionState = initialState;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (navigator.serviceWorker) {\n // Query service worker if the most recent fetch was served from cache\n // Add message listener for handling response\n // eslint-disable-next-line @typescript-eslint/unbound-method\n navigator.serviceWorker.addEventListener('message', this.#serviceWorkerMessageListener);\n // Send JSON-RPC request to Vaadin service worker\n // eslint-disable-next-line no-void\n void navigator.serviceWorker.ready.then((registration) => {\n registration.active?.postMessage({\n method: 'Vaadin.ServiceWorker.isConnectionLost',\n id: 'Vaadin.ServiceWorker.isConnectionLost',\n });\n });\n }\n }\n\n addStateChangeListener(listener: ConnectionStateChangeListener): void {\n this.#stateChangeListeners.add(listener);\n }\n\n removeStateChangeListener(listener: ConnectionStateChangeListener): void {\n this.#stateChangeListeners.delete(listener);\n }\n\n loadingStarted(): void {\n this.state = ConnectionState.LOADING;\n this.#loadingCount += 1;\n }\n\n loadingFinished(): void {\n this.#decreaseLoadingCount(ConnectionState.CONNECTED);\n }\n\n loadingFailed(): void {\n this.#decreaseLoadingCount(ConnectionState.CONNECTION_LOST);\n }\n\n #decreaseLoadingCount(finalState: ConnectionState) {\n if (this.#loadingCount > 0) {\n this.#loadingCount -= 1;\n if (this.#loadingCount === 0) {\n this.state = finalState;\n }\n }\n }\n\n get state(): ConnectionState {\n return this.#connectionState;\n }\n\n set state(newState: ConnectionState) {\n if (newState !== this.#connectionState) {\n const prevState = this.#connectionState;\n this.#connectionState = newState;\n this.#loadingCount = 0;\n for (const listener of this.#stateChangeListeners) {\n listener(prevState, this.#connectionState);\n }\n }\n }\n\n get online(): boolean {\n return this.#connectionState === ConnectionState.CONNECTED || this.#connectionState === ConnectionState.LOADING;\n }\n\n get offline(): boolean {\n return !this.online;\n }\n\n readonly #serviceWorkerMessageListener = (event: MessageEvent) => {\n // Handle JSON-RPC response from service worker\n if (typeof event.data === 'object' && event.data.id === 'Vaadin.ServiceWorker.isConnectionLost') {\n if (event.data.result === true) {\n this.state = ConnectionState.CONNECTION_LOST;\n }\n\n // Cleanup: remove event listener upon receiving response\n // eslint-disable-next-line @typescript-eslint/unbound-method\n navigator.serviceWorker.removeEventListener('message', this.#serviceWorkerMessageListener);\n }\n };\n}\n\nexport function isLocalhost(hostname: string): boolean {\n if (hostname === 'localhost') {\n return true;\n }\n\n if (hostname === '[::1]') {\n return true;\n }\n\n return /^127\\.\\d+\\.\\d+\\.\\d+$/u.test(hostname);\n}\n\nconst $wnd = window as any;\nif (!$wnd.Vaadin?.connectionState) {\n let online;\n if (isLocalhost(window.location.hostname)) {\n // We do not know if we are online or not as we cannot trust navigator.onLine which checks availability of a network connection. Better to assume online so localhost apps can work\n online = true;\n } else {\n online = navigator.onLine;\n }\n\n $wnd.Vaadin ??= {};\n $wnd.Vaadin.connectionState = new ConnectionStateStore(\n online ? ConnectionState.CONNECTED : ConnectionState.CONNECTION_LOST,\n );\n}\n"],
|
|
5
|
+
"mappings": "AAgBO,IAAK,kBAAL,kBAAKA,qBAAL;AAKL,EAAAA,iBAAA,eAAY;AAMZ,EAAAA,iBAAA,aAAU;AASV,EAAAA,iBAAA,kBAAe;AAOf,EAAAA,iBAAA,qBAAkB;AA3BR,SAAAA;AAAA,GAAA;AAgCL,MAAM,qBAAqB;AAAA,EACvB,wBAAwB,oBAAI,IAAmC;AAAA,EAExE;AAAA,EACA,gBAAgB;AAAA,EAEhB,YAAY,cAA+B;AACzC,SAAK,mBAAmB;AAGxB,QAAI,UAAU,eAAe;AAI3B,gBAAU,cAAc,iBAAiB,WAAW,KAAK,6BAA6B;AAGtF,WAAK,UAAU,cAAc,MAAM,KAAK,CAAC,iBAAiB;AACxD,qBAAa,QAAQ,YAAY;AAAA,UAC/B,QAAQ;AAAA,UACR,IAAI;AAAA,QACN,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,uBAAuB,UAA+C;AACpE,SAAK,sBAAsB,IAAI,QAAQ;AAAA,EACzC;AAAA,EAEA,0BAA0B,UAA+C;AACvE,SAAK,sBAAsB,OAAO,QAAQ;AAAA,EAC5C;AAAA,EAEA,iBAAuB;AACrB,SAAK,QAAQ;AACb,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAEA,kBAAwB;AACtB,SAAK,sBAAsB,2BAAyB;AAAA,EACtD;AAAA,EAEA,gBAAsB;AACpB,SAAK,sBAAsB,uCAA+B;AAAA,EAC5D;AAAA,EAEA,sBAAsB,YAA6B;AACjD,QAAI,KAAK,gBAAgB,GAAG;AAC1B,WAAK,iBAAiB;AACtB,UAAI,KAAK,kBAAkB,GAAG;AAC5B,aAAK,QAAQ;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAI,QAAyB;AAC3B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,MAAM,UAA2B;AACnC,QAAI,aAAa,KAAK,kBAAkB;AACtC,YAAM,YAAY,KAAK;AACvB,WAAK,mBAAmB;AACxB,WAAK,gBAAgB;AACrB,iBAAW,YAAY,KAAK,uBAAuB;AACjD,iBAAS,WAAW,KAAK,gBAAgB;AAAA,MAC3C;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAI,SAAkB;AACpB,WAAO,KAAK,qBAAqB,+BAA6B,KAAK,qBAAqB;AAAA,EAC1F;AAAA,EAEA,IAAI,UAAmB;AACrB,WAAO,CAAC,KAAK;AAAA,EACf;AAAA,EAES,gCAAgC,CAAC,UAAwB;AAEhE,QAAI,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,OAAO,yCAAyC;AAC/F,UAAI,MAAM,KAAK,WAAW,MAAM;AAC9B,aAAK,QAAQ;AAAA,MACf;AAIA,gBAAU,cAAc,oBAAoB,WAAW,KAAK,6BAA6B;AAAA,IAC3F;AAAA,EACF;AACF;AAEO,SAAS,YAAY,UAA2B;AACrD,MAAI,aAAa,aAAa;AAC5B,WAAO;AAAA,EACT;AAEA,MAAI,aAAa,SAAS;AACxB,WAAO;AAAA,EACT;AAEA,SAAO,wBAAwB,KAAK,QAAQ;AAC9C;AAEA,MAAM,OAAO;AACb,IAAI,CAAC,KAAK,QAAQ,iBAAiB;AACjC,MAAI;AACJ,MAAI,YAAY,OAAO,SAAS,QAAQ,GAAG;AAEzC,aAAS;AAAA,EACX,OAAO;AACL,aAAS,UAAU;AAAA,EACrB;AAEA,OAAK,WAAW,CAAC;AACjB,OAAK,OAAO,kBAAkB,IAAI;AAAA,IAChC,SAAS,8BAA4B;AAAA,EACvC;AACF;",
|
|
6
|
+
"names": ["ConnectionState"]
|
|
7
|
+
}
|
package/README.md
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@vaadin/common-frontend)
|
|
4
4
|
|
|
5
|
-
A set of utilities used by Vaadin [Flow](https://vaadin.com/docs/latest/flow/
|
|
5
|
+
A set of utilities used by Vaadin [Flow](https://vaadin.com/docs/latest/flow/what-is-flow) and [Hilla](https://vaadin.com/docs/latest/hilla/faq) frameworks.
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
**NOTE**: This package is internal.
|
|
10
|
-
If you want to use Flow or
|
|
10
|
+
If you want to use Flow or Hilla frameworks in your project, visit https://start.vaadin.com.
|
|
11
11
|
|
|
12
12
|
```bash
|
|
13
13
|
$ npm install @vaadin/common-frontend
|
package/index.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
function __REGISTER__(feature, vaadinObj = window.Vaadin ??= {}) {
|
|
2
|
+
vaadinObj.registrations ??= [];
|
|
3
|
+
vaadinObj.registrations.push({
|
|
4
|
+
is: feature ? `${"@vaadin/common-frontend"}/${feature}` : "@vaadin/common-frontend",
|
|
5
|
+
version: "0.0.20"
|
|
6
|
+
});
|
|
7
|
+
}
|
|
8
|
+
export * from "./ConnectionState.js";
|
|
9
|
+
export * from "./ConnectionIndicator.js";
|
|
10
|
+
__REGISTER__();
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../scripts/register.js", "src/index.ts"],
|
|
4
|
+
"sourcesContent": ["export function __REGISTER__(feature, vaadinObj = (window.Vaadin ??= {})) {\n vaadinObj.registrations ??= [];\n vaadinObj.registrations.push({\n is: feature ? `${__NAME__}/${feature}` : __NAME__,\n version: __VERSION__,\n });\n}\n", "export * from './ConnectionState.js';\nexport * from './ConnectionIndicator.js';\n\n// @ts-expect-error: esbuild injection\n// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n__REGISTER__();\n"],
|
|
5
|
+
"mappings": "AAAO,SAAS,aAAa,SAAS,YAAa,OAAO,WAAW,CAAC,GAAI;AACxE,YAAU,kBAAkB,CAAC;AAC7B,YAAU,cAAc,KAAK;AAAA,IAC3B,IAAI,UAAU,GAAG,yBAAQ,IAAI,OAAO,KAAK;AAAA,IACzC,SAAS;AAAA,EACX,CAAC;AACH;ACNA,cAAc;AACd,cAAc;AAId,aAAa;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/common-frontend",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"description": "Vaadin frontend utils used by Flow and Hilla",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -8,18 +8,22 @@
|
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
10
|
"url": "https://github.com/vaadin/flow-hilla-common.git",
|
|
11
|
-
"directory": "
|
|
11
|
+
"directory": "packages/ts/common-frontend"
|
|
12
12
|
},
|
|
13
13
|
"keywords": [
|
|
14
14
|
"Vaadin",
|
|
15
15
|
"Hilla"
|
|
16
16
|
],
|
|
17
17
|
"scripts": {
|
|
18
|
-
"build": "
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
18
|
+
"clean:build": "git clean -fx -e .vite -e node_modules",
|
|
19
|
+
"build": "concurrently npm:build:*",
|
|
20
|
+
"build:esbuild": "tsx ../../../scripts/build.ts",
|
|
21
|
+
"build:dts": "tsc --isolatedModules -p tsconfig.build.json",
|
|
22
|
+
"lint": "eslint src test",
|
|
23
|
+
"lint:fix": "eslint src test --fix",
|
|
24
|
+
"test": "vitest --run",
|
|
25
|
+
"test:watch": "vitest --inspect --no-file-parallelism",
|
|
26
|
+
"test:coverage": "npm test -- --coverage",
|
|
23
27
|
"typecheck": "tsc --noEmit"
|
|
24
28
|
},
|
|
25
29
|
"exports": {
|
|
@@ -48,22 +52,22 @@
|
|
|
48
52
|
"publishConfig": {
|
|
49
53
|
"access": "public"
|
|
50
54
|
},
|
|
51
|
-
"dependencies": {
|
|
52
|
-
"tslib": "^2.3.1"
|
|
53
|
-
},
|
|
54
55
|
"peerDependencies": {
|
|
55
56
|
"lit": "^3.0.0"
|
|
56
57
|
},
|
|
57
58
|
"devDependencies": {
|
|
58
|
-
"@
|
|
59
|
-
"@
|
|
60
|
-
"@types/chai": "
|
|
61
|
-
"@
|
|
62
|
-
"@
|
|
63
|
-
"@
|
|
64
|
-
"@
|
|
65
|
-
"
|
|
66
|
-
"sinon": "
|
|
59
|
+
"@types/chai": "4.3.20",
|
|
60
|
+
"@types/sinon": "21.0.0",
|
|
61
|
+
"@types/sinon-chai": "4.0.0",
|
|
62
|
+
"@vitest/browser": "4.0.18",
|
|
63
|
+
"@vitest/browser-playwright": "4.0.18",
|
|
64
|
+
"@vitest/coverage-v8": "4.0.18",
|
|
65
|
+
"@vitest/ui": "4.0.18",
|
|
66
|
+
"playwright-core": "1.58.2",
|
|
67
|
+
"sinon": "21.0.1",
|
|
68
|
+
"sinon-chai": "4.0.1",
|
|
69
|
+
"type-fest": "5.4.4",
|
|
70
|
+
"vitest": "4.0.18"
|
|
67
71
|
},
|
|
68
|
-
"
|
|
72
|
+
"dependencies": {}
|
|
69
73
|
}
|