|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright (c) 2017 The Polymer Project Authors. All rights reserved. |
| 4 | + * This code may only be used under the BSD style license found at |
| 5 | + * http://polymer.github.io/LICENSE.txt |
| 6 | + * The complete set of authors may be found at |
| 7 | + * http://polymer.github.io/AUTHORS.txt |
| 8 | + * The complete set of contributors may be found at |
| 9 | + * http://polymer.github.io/CONTRIBUTORS.txt |
| 10 | + * Code distributed by Google as part of the polymer project is also |
| 11 | + * subject to an additional IP rights grant found at |
| 12 | + * http://polymer.github.io/PATENTS.txt |
| 13 | + */ |
| 14 | + |
| 15 | +/** |
| 16 | + * LitElement support for hydration of content rendered using lit-ssr. |
| 17 | + * |
| 18 | + * @packageDocumentation |
| 19 | + */ |
| 20 | + |
| 21 | +import {PropertyValues, UpdatingElement} from 'updating-element'; |
| 22 | +import {render} from 'lit-html'; |
| 23 | +import {hydrate} from 'lit-html/hydrate.js'; |
| 24 | + |
| 25 | +interface PatchableLitElement extends HTMLElement { |
| 26 | + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-misused-new |
| 27 | + new (...args: any[]): PatchableLitElement; |
| 28 | + createRenderRoot(): Element | ShadowRoot; |
| 29 | + _needsHydration: boolean; |
| 30 | +} |
| 31 | + |
| 32 | +// eslint-disable-next-line @typescript-eslint/no-explicit-any |
| 33 | +(globalThis as any)['litElementHydrateSupport'] = ({ |
| 34 | + LitElement, |
| 35 | +}: { |
| 36 | + LitElement: PatchableLitElement; |
| 37 | +}) => { |
| 38 | + // Capture whether we need hydration or not |
| 39 | + const createRenderRoot = LitElement.prototype.createRenderRoot; |
| 40 | + LitElement.prototype.createRenderRoot = function () { |
| 41 | + if (this.shadowRoot) { |
| 42 | + this._needsHydration = true; |
| 43 | + return this.shadowRoot; |
| 44 | + } else { |
| 45 | + return createRenderRoot.call(this); |
| 46 | + } |
| 47 | + }; |
| 48 | + |
| 49 | + // Hydrate on first update when needed |
| 50 | + LitElement.prototype.update = function (changedProperties: PropertyValues) { |
| 51 | + const value = this.render(); |
| 52 | + // Since this is a patch, we can't call super.update() |
| 53 | + // eslint-disable-next-line @typescript-eslint/no-explicit-any |
| 54 | + (UpdatingElement.prototype as any).update.call(this, changedProperties); |
| 55 | + if (this._needsHydration) { |
| 56 | + this._needsHydration = false; |
| 57 | + hydrate(value, this.renderRoot, this._renderOptions); |
| 58 | + } else { |
| 59 | + render(value, this.renderRoot, this._renderOptions); |
| 60 | + } |
| 61 | + }; |
| 62 | +}; |
0 commit comments