[Feature]:@twind/with-web-components support function components and/or existing element instances using withTwind

[stevenalanstark]

Describe the problem

The withTwind implementation is setup to extend a class, which works well for the example use case.

However, when working with functional components, there are no classes to extend. This is the case when using SolidJS, which is what I am using.

see: https://www.solidjs.com/guides/faq#can-you-add-support-for-class-components-i-find-the-lifecycles-are-easier-to-reason-about

I'll share my functional work around, however this is not meant to be a final solution, just a proof of concept.

1. Install Twind and create a Mixin:

import config from '/twind.config';
export const withTwind = install(config);
export const withTwindMixin = createMixin((options) => {
    const { element } = options;
    withTwind( element );
    return options;
});

2. Use the middleware:

compose(
    register('ff-layout'),
    withSolid,
    withTwindMixin,
)( (props, options) => {
  ... 
  return { JSX Goes Here }
})

3. But, for this to work, I need to change the install$ function to support an existing element instance

in with-web-components.js

    return function install$(element) {
        sheet.connect(element);
        observer.observe(getShadowRoot(element));
        element.disconnectedCallback = () => {
            sheet.disconnect(element);
        }
        element.tw = tw;
        return element
    };

This change is not robust since it removes the class based implementation completely. Is there a better approach to solve this issue?

thank you!

Describe the proposed solution

support instances when using the withTwind function Ideally, this would support Component Register mixins, see: https://github.com/ryansolid/component-register

Alternatives considered

I'm still relatively new to the web component eco system and could be missing something.

Importance

I cannot use Twind without it

Additional Information

Without this feature I would not be able to use twind.style with solidjs, but would instead be limited to twind.dev