Custom Elements Type Support

[bivens-dev]

Given a web component like shown below

/**
 * my-project/my-element.js
 */
export class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['disabled'];
  }

  set disabled(val) {
    this.__disabled = val;
  }
  get disabled() {
    return this.__disabled;
  }

  fire() {
    this.dispatchEvent(new Event('disabled-changed'));
  }
}

customElements.define('my-element', MyElement);

I should ideally be able to use it like any other component like so:

import 'package:web/web.dart';

void main() {
  final customComponent = document.createElement('my-element') as MyElement;
  document.body!.appendChild(customComponent);
  customComponent.fire(); // The analyzer would ideally know the methods available on the element
}

In order to support use cases like this and other general tooling there is an emerging standard known as Custom Elements Manifest which is just a JSON file which follows a standard schema describing the component. For example the component above would be:

{
  "schemaVersion": "2.0.0",
  "readme": "README.md",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "my-project/my-element.js",
      "declarations": [
        {
          "kind": "class",
          "customElement": true,
          "name": "MyElement",
          "tagName": "my-element",
          "description": "This is the description of the class",
          "members": [
            {
              "kind": "field",
              "name": "disabled"
            },
            {
              "kind": "method",
              "name": "fire"
            }
          ],
          "events": [
            {
              "name": "disabled-changed",
              "type": {
                "text": "Event"
              }
            }
          ],
          "attributes": [
            {
              "name": "disabled"
            }
          ],
          "superclass": {
            "name": "HTMLElement"
          }
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "MyElement",
          "declaration": {
            "name": "MyElement"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "my-element",
          "declaration": {
            "name": "MyElement"
          }
        }
      ]
    }
  ]
}

Therefore, my request would be that this package provided a workflow that allowed the relevant code generation required to support native custom elements provided you were able to also supply a custom elements manifest file to describe it.

[rodydavis]

You should be able to use extension types to create the wrapper around HTMLElement.

extension type MyElement._(HTMLElement _) {
  external bool get disabled;
  external set disabled(bool value);
  external void fire();
}

Then for usage:

import 'package:web/web.dart';

void main() {
  final el = document.createElement('my-element') as HTMLElement;
  final myElement = MyElement(el);
  document.body!.appendChild(el);
  myElement.fire();
}

[srujzs]

Sorry for the late response! I think it's unlikely we'll implement a code generation like this in the short-term. If this manifest could somehow be translated into the Web IDL format, we could modularize the web generator package enough so that users could give it an IDL file to run directly.