Au 2.0RC: Guidance requested: Revisiting the Enhance API in a new context

Framework Knowledge
1

Hello,

SortableJS Wrapper - Custom Drag Container

I have successfully wrapped SortableJS in a manner that is compatible with Au 2.0 (the wrapper will not work with Au 1.0).

Borrowing from the knowledge I gained about the Enhance API in working with creating wrappers for the DevExtreme widgets, I was able to create a custom, Aurelia-enhanced drag container for SortableJS (which you can see below in my TsiTreeView).

Sidebar: With the DevExtreme widgets, I provide content within the tags of a custom element that is slot-like, but it gets harvested, removed, and then enhanced. The content comes from up above, passed in at the owning view (as we discussed at length in another post).

This case, with SortableJS, is different. Right now, I provide innerHTML by importing the template of a template-only drag container component, like this:

import { template as dragContainerTemplate } from './tsi-tree-view-drag-container.html';

...
this.$host = document.createElement('div');
this.$host.innerHTML = dragContainerTemplate;
this.$dragContainer.appendChild(this.$host);
...

I would like to repeat the success I had with the DevExtreme widgets, and provide a full custom element, with a backing view-model, instead of just pulling in a template. My idea is to do something like this in tsi-tree-view.html:

<au-slot name="drag-container">
  <tsi-drag-container-template>
    <tsi-tree-view-drag-container></tsi-tree-view-drag-container>
  </tsi-drag-container-template>
</au-slot>

where tsi-drag-container-template is a dummy tag, analogous to DevExtreme’s dx-template tag, and tsi-tree-view-drag-container is a full-blown Au custom element that serves as default content when I wish to simply use the default drag container (as seen in the GIF above).

The reason for the slot is that I would like to be able to pass in a custom drag container from all the way up in the owning view, harvest the content within TsiTreeView, remove it, and enhance it.

Is this doable with local imports? I’m having trouble with context with respect to a DI container. The challenge is that there are two contexts in terms of where the drag container component originates: in the owning view in one case; right in the TsiTreeView itself in the other case.

Fuller post from tsi-tree-view.js:

onStartSort(e) {
  ...

  // Get the drag container using the class that Sortable attaches to the drag element;
  // clear the markup added to it by Sortable
  this.$dragContainer = document.querySelectorAll('.tsi-sortable-drag-class')?.[0];
  if (!this.$dragContainer) return;

  // Clear the default HTML provided by SortableJS
  this.$dragContainer.innerHTML = '';

  // Create a host for the Aurelia-enhanced markup and add it to the drag container
  this.$host = document.createElement('div');
  this.$host.innerHTML = dragContainerTemplate;
  this.$dragContainer.appendChild(this.$host);

  // Build the VM
  const node = this.treeConfig.api.nodeCache.get(nodeId);
  this.draggedNode = node;
  const viewModel = {
    node,
    count: this.treeConfig.api.getDescendants(node).length,
  };

  // Enhance the markup in the context of the current DI container and place the resultant view on "this"; defer deactivation to the onEndDrag handler
  onResolve(
    Aurelia.enhance({
      container: this.diContainer,
      host: this.$host,
      component: viewModel,
    }),
    (enhancedView) => {
      this.dragContainerView = enhancedView;
    },
  );
}
2 Likes
Au 2.0RC: SortableJS - Custom Aurelia-enhanced drag containers fully implemented!