fix(dependency): Updated to lit-html 1.1.2 & lit-element 2.1.0

In order to run luminave with the latest version of lit-html & lit-element, we had to get rid of
some deprecated code. classMap.js was renamed into class-map.js. when.js was removed. The directives
are working differently now, so we had to update defaultValue(). Also updated the README to make
clear that we recommend to use npm to install dependencies.

fix #114

package.json

@@ -1,6 +1,6 @@
 {
   "name": "luminave",
-  "version": "3.0.0",
+  "version": "3.5.0",
   "description": "Manage all the lights with your web browser and create stunning visual experiences.",
   "main": "index.js",
   "author": "Tim Pietrusky",
@@ -33,8 +33,8 @@
     "@apollo-elements/lib": "0.0.2",
     "@apollo-elements/lit-apollo": "^0.0.5",
     "@material/layout-grid": "^0.39.0",
-    "@material/mwc-button": "0.2.1",
-    "@material/mwc-icon": "0.2.1",
+    "@material/mwc-button": "^0.7.1",
+    "@material/mwc-icon": "^0.7.1",
     "@polymer/app-layout": "3.0.1",
     "@polymer/iron-icons": "3.0.1",
     "@polymer/iron-pages": "3.0.1",
@@ -60,6 +60,7 @@
     "immutability-helper": "github:nerddisco/immutability-helper",
     "keytime": "github:nerddisco/keytime",
     "lit-element": "^2.1.0",
+    "lit-html": "^1.1.2",
     "nodejs-websocket": "^1.7.1",
     "pwa-helpers": "^0.8.3",
     "redux": "^3.7.2",

src/app.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 
 import './components/luminave-menu/index.js'
 import './components/luminave-dashboard/index.js'

src/components/animation-bee/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { store } from '../../reduxStore.js'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { addKeyframe, removeAnimation, setAnimation } from '../../actions/index.js'

src/components/animation-list-item/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 
 /*
  * A animation list item

src/components/animation-list/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { store } from '../../reduxStore.js'
 import '../animation-list-item/index.js'

src/components/animation-manager/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'

src/components/bpm-meter/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 
 /*
  * Show BPM (Beats per Minute)

src/components/channel-grid/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { shared } from '../../styles/shared.js'
 

src/components/config-manager/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { STORAGE_STATE } from '/src/constants/index.js'
 
 /*

src/components/connect-button/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { getConnections } from '../../selectors/index.js'

src/components/dekk-manager/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { connectDekk, setDekkData, addSceneToTimeline, removeSceneFromTimelineAndResetFixtures } from '../../actions/index.js'

src/components/dmx-fixture-property/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { rgbToHex } from '../../directives/rgb-to-hex.js'
 import { defaultValue } from '../../directives/default-value.js'

src/components/dmx-fixture/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { store } from '../../reduxStore.js'
 import { setChannels, setFixture, setFixtureProperties, addKeyframes } from '../../actions/index.js'

src/components/fivetwelve/fivetwelve-manager.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { setFivetwelve } from '../../actions/fivetwelve.js'

src/components/fixture-list-item/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { links } from '../../styles/links.js'
 
 /*

src/components/fixture-list/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import '../fixture-list-item/index.js'
 import { shared } from '../../styles/shared.js'

src/components/fixture-manager/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'

src/components/integration/integration-configuration.js

@@ -1,7 +1,7 @@
 
 import { LitElement, html } from 'lit-element/lit-element.js'
 import { defaultValue } from '../../directives/default-value.js'
-import { classMap } from 'lit-html/directives/classMap.js'
+import { classMap } from 'lit-html/directives/class-map.js'
 
 /*
  * Handle the configuration of an integration (like the API of modV)
@@ -65,8 +65,6 @@ class IntegrationConfiguration extends LitElement {
     ? 'disconnect'
     : 'connect'
 
-
-
     const statusClasses = {
       'status': true,
       'connected': connectionStatus === 'connected',

src/components/keyframe-grid/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { shared } from '../../styles/shared.js'
 

src/components/live-mode/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { setLive } from '../../actions/index.js'

src/components/luminave-dashboard/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import '@polymer/paper-tabs/paper-tab.js'
 import '@polymer/paper-tabs/paper-tabs.js'
 

src/components/luminave-menu/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import '@polymer/paper-tabs/paper-tab.js'

src/components/luminave-status/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { getUsbDmxControllerConnected, getModvConnected } from '../../selectors/index.js'

src/components/luminave-status/indicator.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 
 /*
  * Show the status of something, for example USB or modV

src/components/midi-controller/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import WebMidi from 'webmidi'

src/components/midi-grid/midi-grid.js

@@ -1,13 +1,12 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { learnMidi, addScenesToMidi, removeSceneFromMidi, addMidiMapping } from '../../actions/index.js'
 import '../scene-list/index.js'
 import { MIDI_TYPES, MIDI_TYPE_KNOB, MIDI_TYPE_FADER, MIDI_TYPE_EMPTY, MIDI_TYPE_BUTTON, MIDI_TYPE_ROUND_BUTTON } from '../../constants/index.js'
 import { getMidiLearning, getScenes, getLive } from '../../selectors/index.js'
-import { classMap } from 'lit-html/directives/classMap.js'
-import { when } from 'lit-html/directives/when.js'
+import { classMap } from 'lit-html/directives/class-map.js'
 import '@material/mwc-button/mwc-button.js'
 import '@material/mwc-icon/mwc-icon.js'
 
@@ -281,7 +280,11 @@ class MidiGrid extends connect(store)(LitElement) {
       itemTemplates.push(html`
         <div style="${this.computeItemVars(element, index, learnIndex)}" class="${classMap(itemClasses)}">
 
-          ${when(isEditing, () => this.templateEdit(element, index), () => this.templateNormal(element, index))}
+          ${
+            isEditing
+            ? this.templateEdit(element, index)
+            : this.templateNormal(element, index)
+          }
 
         </div>
       `)

src/components/midi-manager/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'

src/components/modv/modv-color-grid.js

@@ -1,6 +1,6 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
-import { classMap } from 'lit-html/directives/classMap.js'
+import { classMap } from 'lit-html/directives/class-map.js'
 import '@polymer/paper-tooltip/paper-tooltip.js'
 import { collator } from '../../utils/index.js'
 

src/components/modv/modv-manager.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { setModv } from '../../actions/index.js'

src/components/modv/modv-mapper.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import './modv-color-grid.js'
 import { defaultValue } from '../../directives/default-value.js'
 

src/components/rainbow-text/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 
 /*

src/components/scene-bee/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { store } from '../../reduxStore.js'
 import { setSceneName, addAnimationToScene, addFixturesToScene, removeFixtureFromScene, removeAnimationFromScene, addSceneToTimeline, removeScene, resetUniverseAndFixtures, removeFixtureFromSceneAndUniverse } from '../../actions/index.js'
 import '../fixture-list/index.js'

src/components/scene-list-item/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { defaultValue } from '../../directives/default-value.js'
 
 /*

src/components/scene-list/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import '../scene-list-item/index.js'
 import { shared } from '../../styles/shared.js'

src/components/scene-manager/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'

src/components/search/search-field.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 
 /*
  *  Search a list of elements

src/components/storage-manager/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { STORAGE_STATE } from '../../constants/index.js'

src/components/tap-button/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { store } from '../../reduxStore.js'
 import { setBpm } from '../../actions/index.js'
 

src/components/timeline/timeline-animation.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html, css } from 'lit-element'
 import { addToFixtureBatch } from '../../utils/index.js'
 import TimelineKeytime from './timeline-keytime.js'
 import { toFixedNumber } from '../../utils/index.js'

src/components/timeline/timeline-manager.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'

src/components/timeline/timeline-scene.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { store } from '../../reduxStore.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'

src/components/ui-spacer/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 
 /*
  * A spacer to be used to make some space between components

src/components/universe-manager/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'

src/components/usb-dmx-manager/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import Controller from 'webusb-dmx512-controller/controller.js'

src/components/venue/manager.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'

src/components/venue/slot-grid.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element/lit-element.js'
+import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { addVenueSlot, setVenueSlot, removeVenueSlot } from '../../actions/venue.js'
@@ -8,7 +8,7 @@ import '../../components/venue/slot-item.js'
 import { repeat } from 'lit-html/directives/repeat.js'
 import uuidv1 from 'uuid/v1.js'
 import { defaultValue } from '../../directives/default-value.js'
-import { classMap } from 'lit-html/directives/classMap.js'
+import { classMap } from 'lit-html/directives/class-map.js'
 
 /*
  * Show MIDI buttons in a grid