Move from paper drop down to mwc-select in editors

[bemble]

I would recommend moving away from Paper Drop down menus. I know this was not changed in this PR but something to think about.

HA frontend is moving out all paper Drop downs and that means the component will no longer be loaded. We have moved to mwc-select

Originally posted by @zsarnett in #131 (comment)

[zsarnett]

Mushroom Editors in the development version of HA right now. The release will be in beta on the 23rd of Feb

[piitaya]

@zsarnett I started to migrate the picker to mwc-select (local dev) 🙂 What is the first HA front-end version to support mwc inputs ?
Will the paper-input support be dropped too?

[zsarnett]

Frontend version: 20220214.0 - latest

This is the latest Frontend Version that has moved to mwc-select

MWC select will be used all throughout the UI. It's still not supported (meaning we could move from mwc-select) but that wont be anytime soon or ever.

PAper-input will be dropped eventually but not for the next release

[piitaya]

With the new select :

[piitaya]

@zsarnett Maybe we must use MWC select after 20220214.0 and Paper Dropdown before.

[zsarnett]

Yea. Major release:

2022.2 - Paper
2022.3 - MWC

MWC may work on previous version but not guaranteed

[piitaya]

@zsarnett do you think we can move to HA Form for the next HA March release ? 😊

[piitaya]

@zsarnett Thank's for your dev blog article https://developers.home-assistant.io/blog/2022/02/18/paper-elements.
Unfortunately, we can not define our own custom textfield and textarea :

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-notched-outline" has already been used with this registry

The TextfieldBase file import @material/mwc-notched-outline;
And the NotchedOutline file register mwc-notched-outline as a customElement.

The registration is done by Home Assistant Front-end and by the custom cards and create an error 😟

Edit : I copied the mwc-textarea and mwc-textfield to remove the mwc-notched-outline import.
It works but looks a little hacky 😅

[bramkragten]

A solution could be https://github.com/lit/lit/tree/main/packages/labs/scoped-registry-mixin

It does require a polyfill: https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry

You could use it like this:

import { LitElement, html } from "lit";
import { ScopedRegistryHost } from "@lit-labs/scoped-registry-mixin";
import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
import { NotchedOutlineBase } from "@material/mwc-notched-outline/mwc-notched-outline-base";

import { styles as textfieldStyles } from "@material/mwc-textfield/mwc-textfield.css";
import { styles as notchedOutlineStyles } from "@material/mwc-notched-outline/mwc-notched-outline.css";

class CustomCard extends ScopedRegistryHost(LitElement) {

  static get elementDefinitions() {
    return {
      "mwc-textfield": class extends TextFieldBase {
        static get styles() {
          return textfieldStyles;
        }
      },
      "mwc-notched-outline": class extends NotchedOutlineBase {
        static get styles() {
          return notchedOutlineStyles;
        }
      },
    };
  }
  
  render() {
  	return html`<mwc-textfield></mwc-textfield>`
  }
}

Then in your rollup config, you should make sure the file @material/mwc-notched-outline/mwc-notched-outline.js will never be loaded.

You could do that like this:

rollup-ignore-plugin.js

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.js

import ignore from "./rollup-ignore-plugin.js";
export default {
  ...
  plugins: [
    ignore({
      files: [
        require.resolve("@material/mwc-notched-outline/mwc-notched-outline.js"),
      ],
    }),
  ],
  ...
}

[bramkragten]

You could already use the ignore plugin with your current approach, so you don't have to copy mwc-textfield and mwc-textarea.

[piitaya]

Thanks @bramkragten.
I migrated to the ignore plugin and I created 2 components mushroom-textfield and mushroom-textarea to avoid using scoped components (and the polyfill). It's easier that way. I will migrate to scoped components if I see limitation in the future 🙂

[bramkragten]

We are including the polyfill in the next Home Assistant version. As you will not be able to do the same for mwc-select for instance.

This is needed for mwc-select (Except for the textfield):

[piitaya]

Will the mwc-select be available to use in the next HA release without scoped components ?
I saw there are still import "@material/mwc-select"; is HA front-end. Do you plan to create ha-select in the next release to replace mwc-select ?

The home assistant front-end is moving a lot these last days and hours 😅 It is hard to follow and know which components will be available in the next release. I'm trying to have a functional mushroom version before and after 2022.3.

For now, I tested from 2021.11 version (version that introduces icon picker) to the last dev version in dockerhub.

[bramkragten]

Yes, we plan to create a ha-select soon