Code split jQuery roundslider (#2197)

src/panels/lovelace/cards/hui-light-card.ts

@@ -8,8 +8,6 @@ import { TemplateResult } from "lit-html";
 
 import { fireEvent } from "../../../common/dom/fire_event";
 import { styleMap } from "lit-html/directives/styleMap";
-import { jQuery } from "../../../resources/jquery";
-import { roundSliderStyle } from "../../../resources/jquery.roundslider";
 import { HomeAssistant, LightEntity } from "../../../types";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard } from "../types";
@@ -23,6 +21,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
+import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand";
 
 const lightConfig = {
   radius: 80,
@@ -49,11 +48,15 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
   public hass?: HomeAssistant;
   private _config?: Config;
   private _brightnessTimout?: number;
+  private _roundSliderStyle?: TemplateResult;
+  private _jQuery?: any;
 
   static get properties(): PropertyDeclarations {
     return {
       hass: {},
       _config: {},
+      roundSliderStyle: {},
+      _jQuery: {},
     };
   }
 
@@ -124,10 +127,15 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     return hasConfigOrEntityChanged(this, changedProps);
   }
 
-  protected firstUpdated(): void {
+  protected async firstUpdated(): Promise<void> {
+    const loaded = await loadRoundslider();
+
+    this._roundSliderStyle = loaded.roundSliderStyle;
+    this._jQuery = loaded.jQuery;
+
     const brightness = this.hass!.states[this._config!.entity].attributes
       .brightness;
-    jQuery("#light", this.shadowRoot).roundSlider({
+    this._jQuery("#light", this.shadowRoot).roundSlider({
       ...lightConfig,
       change: (value) => this._setBrightness(value),
       drag: (value) => this._dragEvent(value),
@@ -139,13 +147,13 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
   }
 
   protected updated(changedProps: PropertyValues): void {
-    if (!this._config || !this.hass) {
+    if (!this._config || !this.hass || !this._jQuery) {
       return;
     }
 
     const attrs = this.hass!.states[this._config!.entity].attributes;
 
-    jQuery("#light", this.shadowRoot).roundSlider({
+    this._jQuery("#light", this.shadowRoot).roundSlider({
       value: Math.round((attrs.brightness / 254) * 100) || 0,
     });
 
@@ -157,7 +165,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
 
   private renderStyle(): TemplateResult {
     return html`
-      ${roundSliderStyle}
+      ${this._roundSliderStyle}
       <style>
         :host {
           display: block;

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -6,13 +6,11 @@ import {
 } from "@polymer/lit-element";
 import { classMap } from "lit-html/directives/classMap";
 import { TemplateResult } from "lit-html";
-import { jQuery } from "../../../resources/jquery";
 
 import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import computeStateName from "../../../common/entity/compute_state_name";
 
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import { roundSliderStyle } from "../../../resources/jquery.roundslider";
 import { HomeAssistant, ClimateEntity } from "../../../types";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard } from "../types";
@@ -20,6 +18,7 @@ import { LovelaceCardConfig } from "../../../data/lovelace";
 
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
+import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand";
 
 const thermostatConfig = {
   radius: 150,
@@ -58,11 +57,15 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   public hass?: HomeAssistant;
   private _config?: Config;
+  private _roundSliderStyle?: TemplateResult;
+  private _jQuery?: any;
 
   static get properties(): PropertyDeclarations {
     return {
       hass: {},
       _config: {},
+      roundSliderStyle: {},
+      _jQuery: {},
     };
   }
 
@@ -134,7 +137,12 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     return hasConfigOrEntityChanged(this, changedProps);
   }
 
-  protected firstUpdated(): void {
+  protected async firstUpdated(): Promise<void> {
+    const loaded = await loadRoundslider();
+
+    this._roundSliderStyle = loaded.roundSliderStyle;
+    this._jQuery = loaded.jQuery;
+
     const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
 
     const _sliderType =
@@ -143,7 +151,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
         ? "range"
         : "min-range";
 
-    jQuery("#thermostat", this.shadowRoot).roundSlider({
+    this._jQuery("#thermostat", this.shadowRoot).roundSlider({
       ...thermostatConfig,
       radius: this.clientWidth / 3,
       min: stateObj.attributes.min_temp,
@@ -155,7 +163,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   }
 
   protected updated(changedProps: PropertyValues): void {
-    if (!this._config || !this.hass) {
+    if (!this._config || !this.hass || !this._jQuery) {
       return;
     }
 
@@ -179,7 +187,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
       sliderValue = uiValue = stateObj.attributes.temperature;
     }
 
-    jQuery("#thermostat", this.shadowRoot).roundSlider({
+    this._jQuery("#thermostat", this.shadowRoot).roundSlider({
       value: sliderValue,
     });
     this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = uiValue;
@@ -192,7 +200,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
 
   private renderStyle(): TemplateResult {
     return html`
-      ${roundSliderStyle}
+      ${this._roundSliderStyle}
       <style>
         :host {
           display: block;

src/resources/jquery.roundslider.js

@@ -1,8 +1,12 @@
 import { html } from "@polymer/lit-element";
-import "./jquery";
+// jQuery import should come before plugin import
+import { jQuery as jQuery_ } from "./jquery";
 import "round-slider";
+// eslint-disable-next-line
 import roundSliderCSS from "round-slider/dist/roundslider.min.css";
 
+export const jQuery = jQuery_;
+
 export const roundSliderStyle = html`
   <style>
     ${roundSliderCSS}

src/resources/jquery.roundslider.ondemand.ts

@@ -0,0 +1,15 @@
+import { TemplateResult } from "lit-html";
+
+type LoadedRoundSlider = Promise<{
+  roundSliderStyle: TemplateResult;
+  jQuery: any;
+}>;
+
+let loaded: LoadedRoundSlider;
+
+export const loadRoundslider = async (): LoadedRoundSlider => {
+  if (!loaded) {
+    loaded = import(/* webpackChunkName: "jquery-roundslider" */ "./jquery.roundslider");
+  }
+  return loaded;
+};