Proposal: Splitting modules into three types of modules - low-level, widgets, and controls

[megoth]

(I've spoken to @timbl about this earlier, and we think this is a good idea, but not written it down here, so thought I would create an issue to open it up for discussion.)

Currently the API of Solid UI is split up into modules that usually have a mix of low- and high-level functionality. To clear up these we propose a convention that splits modules into three types: low-level, widgets, and controls. The idea is that the types handle increasingly complex methods in terms of the DOM elements that are returned.

1. The low-level methods do not deal with DOM elements at all, but deal with data manipulation and utility functions that are useful when working with Solid.
2. Widgets return simple DOM elements, such as buttons and other elements that are meant to be woven into a larger compositions.
3. Controls are complete DOM elements in the sense that they can work stand-alone and can expose complex interactions.

The modules would follow a name convention given their type, e.g. low-level modules would simply be named the functionality they expose, widget modules would be postfixed Widget, and control modules would be postfixed Control. This way a range of functionality that all reflect the same type of functionality could all start with the same name, but the two latter would expose higher complexity, e.g. acl, aclWidget, and aclControl.

We also propose that existing API endpoints that would be deprecated as part of this restructure to be deprecated slowly, giving people who depend on the existing API ample time to update their dependencies.

[scenaristeur]

Hi @megoth here is the simplest way I've found to build "really" independant elements https://github.com/scenaristeur/socialid-template ;-) With the same structure we can create those three type of module that you propose. and they can be nested

a < login-widget > element can be nested in a < login-control > element and can host a < login-low > element that deal with data. all that elements can talk to each other or to other elements with evejs and can be parametrized by attributes like < login-control lang="fr" color="blue" > this is what i use for my projects like https://scenaristeur.github.io/salut

[megoth]

@scenaristeur Thanks for the pointers! I'm a fan of the idea of Web Components as a way of exposing components that can even be used when compositioning HTML.

This issue is more about the overall structure of the API, and not necessarily about the form that the DOM functions expose their functionality through. For that I'll point you to https://github.com/solid/solid-ui/issues/250, which I'll try to expand with another example to facilitate the possibility of standardizing using Web Components.

I reckon you're a big of Polymer since you're using lit-element? Any good pointers to good resources to learn using it, I might experiment a bit this weekend to see how it could fit into Solid UI 😸