Error when using custom-elements in collection views

[luckydye]

When using the code below in a collection, I get a bunch of errors and the panels are not usable anymore.

try {
  customElements.define("a-xyz", class XYZ extends HTMLElement {});
} catch (err) {
  console.error(err);
}

class Plugin extends CollectionPlugin {
  onLoad() {
    this.views.register("table", (viewContext) => {
      const $element = viewContext.getElement();
      $element.innerHTML = /* html */ `<a-xyz style="height: calc(100vh - 290px);width: 100%;"></a-xyz>`;
    })
  }
}

Results in:

app-63FFH6CQ.js:230 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'onLoad')

and many more following...

[itscools]

It seems you're not returning the callback functions which Thymer needs to work with your custom view, so something like:

  this.views.register("table", (viewContext) => {

	return {
		onLoad: () => {
			// Initial render will happen in onRefresh
		},
		onRefresh: ({records}) => {
			this.renderMyView(viewContext);
		},
		onPanelResize: () => {
			// Re-render on resize to adjust layout
			this.renderMyView(viewContext);
		},
		onDestroy: () => {
		},
		onFocus: () => {
		},
		onBlur: () => {
		},
		onKeyboardNavigation: ({e}) => {
		},
	}

  })

You can have a look at https://github.com/thymerapp/thymer-plugin-sdk/blob/main/examples/collection-plugins/simple-list-view/listview-plugin.js for an example implementation.

We should probably also check on our end whether the API really returns a correct set of functions.

Hope this helps!

[luckydye]

@itscools Ohh, my bad. This is awsome, thank you!!