DAL 4.0.0: Add AutocompleteLight WebComponent alternative to Select2

[jpic]

Currently, the default DAL frontend is Select2 with jQuery. Those are hard to build right and to cohabitate nicely with other stuff, ie. the django admin Form.Media.

Thanks to django-developers mailing list, I had the chance that @jrief and @carltongibson talk me into making djwc Django WebComponents which works insanely well.

To close this issue, go for an autocomplete implemantion that leverages the shadow DOM standard which is now supported by all browsers for years.

djwc Django WebComponents supports any of the 22 Autocomplete webcomponents including Material and Bootstrap ones, and many others, without even NodeJS installed, back to the future.

Let's implement one for DAL 4.0.0 and end the war between Form.Media, Select2 and jQuery,

:tophat:

[jpic]

Finnaly, I decided to re-do jquery-autocomplete-light in a webcomponent.

For those of you who did not know how DAL was 8 years ago, it's an autocomplete script that is decoupled from select input management which means that you can use it as a global navigation autocomplete such as the one you have on facebook.

That part is done on https://github.com/yourlabs/autocomplete-light it took me 5 hours or something, so it was damn fast, I guess I'm a better JS hacker than 8 years ago, because jquery-autocomplete-light was part of my hardest scripts.

So now I'm going to work on the second autocomplete webcomponent that maintains a <select>

I have reasons to believe it will be ready today, if I hack late at night we might even have an implementation in DAL.

I really feel like this is the breakthrough in Django frontend development I have been waiting for years ... and it's now at the tip of my fingers ...

[Mogost]

Good news! When everything is ready, you can make a pre-release so that those who are more interested in all this, check it on their projects. Before we tell the whole community that everything is ready for use in production.

[jpic]

A release manager who maintains the current DAL in production would be great to have (it is not my case because I migrated to webpack long ago, coming back for webcomponents), anyway in this case it will not break dal_select2, it's a just different set of widgets and views in a different dal_module.

However, you should be cautious when upgrading to DAL 3.7.0 if you have Media hacks (pasted code) in your project as that release will break it, custom scripts seem still working though because the linked_data use case of the test project was already present.

[jpic]

Webcomponents release available for demo :

• autocomplete-light
• autocomplete-select (with multiple support)

https://oss.yourlabs.me/autocomplete-light/

CSS job is still to make, but I want to finish integrating first to see how to support theming with django.contrib.admin and others.

Got distracted when integrating into the test_project because I wanted a more efficient npm downloader implementation ...

[jpic]

We got a PR: #1170 which also solves the DRY problem we got when decoupling the Field and View.

All the challenges seem solved, it's just a matter of porting more features and tests.

No BC break in sight so far, it's just, your life will be much better when you move to dal_alight ...

[jpic]

This is looking kind of finished : https://oss.yourlabs.me/autocomplete-light/

Please take a look and report your feelings, feedback, before i release a v1

This will be added to DAL in DAL v4, it's like jquery-autocomplete-light which we had in DAL 1 and 2 (server side rendering of autocomplete box)

[jpic]

(It's supposedly going to be a lighter alternative to select2)

[orientalperil]

What is the status of DAL v4? Is there anything I can help to move it along?

[jpic]

@orientalperil what exactly are you after ?

The idea of v4 is to add two major features in addition to the web component:

• Generalize the FormClass.as_urls() principle, that's currently used for Generic Relation support as contributed by @Guilouf
• The idea that widgets are able to generate compatible view classes, so that we can finally add back some DRYness

Both of these are in this pull request, in addition to using the webcomponent.

So here the work is into testing / documenting the changes in this PR and go on to implement demo / tests for other use cases, pushing it to the feature level we currently have with select2.

Which makes me think we can still make another v3 release that just adds the AutocompleteLight web component as an alternative to select2, if you think that would be of any value ?

[orientalperil]

@jpic I'm having trouble using DAL because I'm using Webpack and can't make the code from DAL work. Even when I try to copy it into my module select2 cannot be imported into a Webpack module. For the moment I switched to writing my own code using selectize.js which can be imported

[jpic]

I could not get select2 to work in webpack last time I tried in #990.

Nice selectize code, I forgot about that one, looking forward to reading it !

Did you use the registerHandler javascript method to instanciate your selectize ?

Instead, why not instantiate your selectize inside a mini web component so that your browser deals with variable life cycle rather than DAL and the quirks that this implies ?

Please, if you are starting a new project, I would strongly advise against using Webpack for development instead of Snowpack: even migrating is easy if you have learnt to keep your webpack config minimal over the years ... However, Snowpack relies on W3C standard that didn't exist at the time of Webpack so webpack will still be supported for legacy projects anyway.

[jpic]

so webpack will still be supported for legacy projects anyway.

I mean in general, I'm not sure about select2, I believe they support it nowadays ?

[orientalperil]

I actually didn't use any of the DAL code other than copying some code from the form widget that sets the select element to have only one option element. I used a Django REST Framework ListAPIView and just rendered the URL I needed with the Django json_script template filter to access it from JavaScript and called selectize on the select element.

I just think having an out of the box Django autocomplete app that works with ES6 modules would be so much nicer.

Yeah it seems the select2 authors have not done any work to make it useable with ES6 modules which just sucks.

Thanks for pointing out Snowpack! Haven't heard of it before and it looks like it addresses the only thing I have against Webpack which is requiring to build bundles during development.

[jpic]

While I agree with you on ES modules, I do much prefer the WebComponent additional layer because the lifecycle of the JS that goes with the DOM is completely management by the browser: no more "dal autocomplete function" that has proven to be hard to be reliable on the wide range of setups users have shown over time: loading the module registers a custom html element and when the browser load that custom element in the dom it will start it and so on.

Did you try that branch we are commenting on ? There might be a few bugs but overall it seems to get to the point with much less mechanics than what we currently have.

[orientalperil]

I haven't tried WebComponents outside of using Ember.js or Vue but I definitely see the value.

I haven't tried this branch. I just found this while looking for a Django autocomplete solution and having problems with the current release of DAL.

[jpic]

Too bad we had this discussion on this pull request instead of a dedicated issue then :P