Update Editor for new Scoped Registry

elements/formfield.js

@@ -0,0 +1,10 @@
+import { FormfieldBase } from '@material/mwc-formfield/mwc-formfield-base.js';
+import { styles as formfieldStyles } from '@material/mwc-formfield/mwc-formfield.css.js';
+
+export const formfieldDefinition = {
+  'mwc-formfield': class extends FormfieldBase {
+    static get styles() {
+      return formfieldStyles;
+    }
+  },
+};

elements/ignore/select.js

@@ -0,0 +1,8 @@
+export const ignoreSelectFiles = [
+  '@material/mwc-ripple/mwc-ripple.js',
+  '@material/mwc-menu/mwc-menu.js',
+  '@material/mwc-menu/mwc-menu-surface.js',
+  '@material/mwc-list/mwc-list.js',
+  '@material/mwc-list/mwc-list-item.js',
+  '@material/mwc-icon/mwc-icon.js',
+];

elements/ignore/switch.js

@@ -0,0 +1 @@
+export const ignoreSwitchFiles = ['@material/mwc-ripple/mwc-ripple.js'];

elements/ignore/textfield.js

@@ -0,0 +1 @@
+export const ignoreTextfieldFiles = ['@material/mwc-notched-outline/mwc-notched-outline.js'];

elements/select.js

@@ -0,0 +1,53 @@
+import { SelectBase } from '@material/mwc-select/mwc-select-base.js';
+import { ListBase } from '@material/mwc-list/mwc-list-base.js';
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base.js';
+import { MenuBase } from '@material/mwc-menu/mwc-menu-base.js';
+import { MenuSurfaceBase } from '@material/mwc-menu/mwc-menu-surface-base.js';
+import { RippleBase } from '@material/mwc-ripple/mwc-ripple-base.js';
+import { NotchedOutlineBase } from '@material/mwc-notched-outline/mwc-notched-outline-base.js';
+
+import { styles as selectStyles } from '@material/mwc-select/mwc-select.css';
+import { styles as listStyles } from '@material/mwc-list/mwc-list.css';
+import { styles as listItemStyles } from '@material/mwc-list//mwc-list-item.css';
+import { styles as rippleStyles } from '@material/mwc-ripple/mwc-ripple.css';
+import { styles as menuStyles } from '@material/mwc-menu/mwc-menu.css';
+import { styles as menuSurfaceStyles } from '@material/mwc-menu/mwc-menu-surface.css';
+import { styles as notchedOutlineStyles } from '@material/mwc-notched-outline/mwc-notched-outline.css';
+
+export const selectDefinition = {
+  'mwc-select': class extends SelectBase {
+    static get styles() {
+      return selectStyles;
+    }
+  },
+  'mwc-list': class extends ListBase {
+    static get styles() {
+      return listStyles;
+    }
+  },
+  'mwc-list-item': class extends ListItemBase {
+    static get styles() {
+      return listItemStyles;
+    }
+  },
+  'mwc-ripple': class extends RippleBase {
+    static get styles() {
+      return rippleStyles;
+    }
+  },
+  'mwc-menu': class extends MenuBase {
+    static get styles() {
+      return menuStyles;
+    }
+  },
+  'mwc-menu-surface': class extends MenuSurfaceBase {
+    static get styles() {
+      return menuSurfaceStyles;
+    }
+  },
+  'mwc-notched-outline': class extends NotchedOutlineBase {
+    static get styles() {
+      return notchedOutlineStyles;
+    }
+  },
+};

elements/switch.js

@@ -0,0 +1,17 @@
+import { SwitchBase } from '@material/mwc-switch/deprecated/mwc-switch-base.js';
+import { RippleBase } from '@material/mwc-ripple/mwc-ripple-base.js';
+import { styles as switchStyles } from '@material/mwc-switch/deprecated/mwc-switch.css';
+import { styles as rippleStyles } from '@material/mwc-ripple/mwc-ripple.css';
+
+export const switchDefinition = {
+  'mwc-switch': class extends SwitchBase {
+    static get styles() {
+      return switchStyles;
+    }
+  },
+  'mwc-ripple': class extends RippleBase {
+    static get styles() {
+      return rippleStyles;
+    }
+  },
+};

elements/textfield.js

@@ -0,0 +1,18 @@
+import { TextFieldBase } from '@material/mwc-textfield/mwc-textfield-base.js';
+import { NotchedOutlineBase } from '@material/mwc-notched-outline/mwc-notched-outline-base.js';
+
+import { styles as textfieldStyles } from '@material/mwc-textfield/mwc-textfield.css';
+import { styles as notchedOutlineStyles } from '@material/mwc-notched-outline/mwc-notched-outline.css';
+
+export const textfieldDefinition = {
+  'mwc-textfield': class extends TextFieldBase {
+    static get styles() {
+      return textfieldStyles;
+    }
+  },
+  'mwc-notched-outline': class extends NotchedOutlineBase {
+    static get styles() {
+      return notchedOutlineStyles;
+    }
+  },
+};

package.json

@@ -15,9 +15,18 @@
   "author": "Ian Richardson <iantrich@gmail.com>",
   "license": "MIT",
   "dependencies": {
+    "@lit-labs/scoped-registry-mixin": "^1.0.0",
+    "@material/mwc-formfield": "^0.25.3",
+    "@material/mwc-list": "^0.25.3",
+    "@material/mwc-menu": "^0.25.3",
+    "@material/mwc-notched-outline": "^0.25.3",
+    "@material/mwc-ripple": "^0.25.3",
+    "@material/mwc-select": "^0.25.3",
+    "@material/mwc-switch": "^0.25.3",
+    "@material/mwc-textfield": "^0.25.3",
     "custom-card-helpers": "^1.7.2",
     "home-assistant-js-websocket": "^5.11.1",
-    "lit": "^2.0.0-rc.2"
+    "lit": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
@@ -39,9 +48,14 @@
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "rollup-plugin-uglify": "^6.0.4",
     "typescript": "^4.4.3"
   },
+  "resolutions": {
+    "lit": "^2.1.2",
+    "lit-html": "2.1.2",
+    "lit-element": "3.1.2",
+    "@lit/reactive-element": "1.2.1"
+  },
   "scripts": {
     "start": "rollup -c rollup.config.dev.js --watch",
     "build": "npm run lint && npm run rollup",

rollup-plugins/ignore.js

@@ -0,0 +1,24 @@
+export default function (userOptions = {}) {
+  // Files need to be absolute paths.
+  // This only works if the file has no exports
+  // and only is imported for its side effects
+  const files = userOptions.files || [];
+
+  if (files.length === 0) {
+    return {
+      name: 'ignore',
+    };
+  }
+
+  return {
+    name: 'ignore',
+
+    load(id) {
+      return files.some((toIgnorePath) => id.startsWith(toIgnorePath))
+        ? {
+            code: '',
+          }
+        : null;
+    },
+  };
+}

rollup.config.dev.js

@@ -1,32 +1,39 @@
-import resolve from "rollup-plugin-node-resolve";
-import typescript from "rollup-plugin-typescript2";
-import babel from "rollup-plugin-babel";
-import serve from "rollup-plugin-serve";
-import { terser } from "rollup-plugin-terser";
+import resolve from 'rollup-plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import babel from 'rollup-plugin-babel';
+import serve from 'rollup-plugin-serve';
+import { terser } from 'rollup-plugin-terser';
 import json from '@rollup/plugin-json';
+import ignore from './rollup-plugins/ignore';
+import { ignoreTextfieldFiles } from './elements/ignore/textfield';
+import { ignoreSelectFiles } from './elements/ignore/select';
+import { ignoreSwitchFiles } from './elements/ignore/switch';
 
 export default {
-  input: ["src/boilerplate-card.ts"],
+  input: ['src/boilerplate-card.ts'],
   output: {
-    dir: "./dist",
-    format: "es",
+    dir: './dist',
+    format: 'es',
   },
   plugins: [
     resolve(),
     typescript(),
     json(),
     babel({
-      exclude: "node_modules/**",
+      exclude: 'node_modules/**',
     }),
     terser(),
     serve({
-      contentBase: "./dist",
-      host: "0.0.0.0",
+      contentBase: './dist',
+      host: '0.0.0.0',
       port: 5000,
       allowCrossOrigin: true,
       headers: {
-        "Access-Control-Allow-Origin": "*",
+        'Access-Control-Allow-Origin': '*',
       },
     }),
+    ignore({
+      files: [...ignoreTextfieldFiles, ...ignoreSelectFiles, ...ignoreSwitchFiles].map((file) => require.resolve(file)),
+    }),
   ],
 };

rollup.config.js

@@ -5,6 +5,10 @@ import babel from 'rollup-plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import serve from 'rollup-plugin-serve';
 import json from '@rollup/plugin-json';
+import ignore from './rollup-plugins/ignore';
+import { ignoreTextfieldFiles } from './elements/ignore/textfield';
+import { ignoreSelectFiles } from './elements/ignore/select';
+import { ignoreSwitchFiles } from './elements/ignore/switch';
 
 const dev = process.env.ROLLUP_WATCH;
 
@@ -28,6 +32,9 @@ const plugins = [
   }),
   dev && serve(serveopts),
   !dev && terser(),
+  ignore({
+    files: [...ignoreTextfieldFiles, ...ignoreSelectFiles, ...ignoreSwitchFiles].map((file) => require.resolve(file)),
+  }),
 ];
 
 export default [

src/action-handler-directive.ts

@@ -50,7 +50,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     this.appendChild(this.ripple);
     this.ripple.primary = true;
 
-    ['touchcancel', 'mouseout', 'mouseup', 'touchmove', 'mousewheel', 'wheel', 'scroll'].forEach(ev => {
+    ['touchcancel', 'mouseout', 'mouseup', 'touchmove', 'mousewheel', 'wheel', 'scroll'].forEach((ev) => {
       document.addEventListener(
         ev,
         () => {
@@ -192,7 +192,7 @@ export const actionHandler = directive(
       return noChange;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     render(_options?: ActionHandlerOptions) {}
   },
 );

src/boilerplate-card.ts

@@ -1,13 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  LitElement,
-  html,
-  TemplateResult,
-  css,
-  PropertyValues,
-  CSSResultGroup,
-} from 'lit';
-import { customElement, property, state } from "lit/decorators";
+import { LitElement, html, TemplateResult, css, PropertyValues, CSSResultGroup } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
 import {
   HomeAssistant,
   hasConfigOrEntityChanged,
@@ -18,9 +11,6 @@ import {
   getLovelace,
 } from 'custom-card-helpers'; // This is a community maintained npm module with common helper functions/types. https://github.com/custom-cards/custom-card-helpers
 
-
-import './editor';
-
 import type { BoilerplateCardConfig } from './types';
 import { actionHandler } from './action-handler-directive';
 import { CARD_VERSION } from './const';
@@ -45,6 +35,7 @@ console.info(
 @customElement('boilerplate-card')
 export class BoilerplateCard extends LitElement {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
+    await import('./editor');
     return document.createElement('boilerplate-card-editor');
   }
 
@@ -116,9 +107,7 @@ export class BoilerplateCard extends LitElement {
   }
 
   private _showWarning(warning: string): TemplateResult {
-    return html`
-      <hui-warning>${warning}</hui-warning>
-    `;
+    return html` <hui-warning>${warning}</hui-warning> `;
   }
 
   private _showError(error: string): TemplateResult {
@@ -129,9 +118,7 @@ export class BoilerplateCard extends LitElement {
       origConfig: this.config,
     });
 
-    return html`
-      ${errorCard}
-    `;
+    return html` ${errorCard} `;
   }
 
   // https://lit.dev/docs/components/styles/